New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[scroll-animations-1] Allow named ranges to be used with math functions #8852
Comments
Unfortunately that's not currently possible. It would be a pretty decent syntax and processing change to allow arbitrary values like that. It's something we'd certainly like to do eventually, especially for things like this where the keyword converts directly into a numeric value and doesn't otherwise change the behavior of the property (unlike, say, The best way to hack this in would be via a special function, valid in animation-range, that took a keyword+percentage pair and resolved it to a %. It would be a no-op when used on its own, but it would allow math functions to just treat it like a percentage, which is well-defined. |
@ydaniv I'm not sure I understand your use case. You want the element to be fully opaque as soon as it's visible, right? So why would it have a fade-in animation during |
Since we resolved on not clamping timeline ranges by default, I still want to allow it as opt-in. I guess we can achieve this opt-in in other methods, but this one seemed the most simple one. |
@ydaniv so, for a fade-in animation, if the element is 10% on screen, you want the animation to be equivalent to |
@fantasai correct. The idea is to allow author to opt-in to the UA respecting the full effect progress from 0% to 100% (same in end of scroll container), what we called before "clamping". |
@ydaniv Do you want the same effect if that image is 90% above the fold? Should it still be fully transparent at that point? |
@fantasai of course at some point the range may become ridiculously short. In some cases it would make sense to disable that effect completely. Assuming this is a case that happens mostly in an authoring tool, then disabling the effect would be even preferred. |
Thanks @bramus! Yep, that's the use-case for animations at end of scroller.
If we use |
Just had another related request where someone wanted to run an animation from Relying on percentages to run the animation – e.g. from Right now they are working around it by injecting a sentinel div of 60px height at the bottom of the element, which they are then tracking. |
@bramus they should be able to specify |
GSAP just added this via new |
This use case also requires that we have a way to specify the non-subject range for a view timeline as currently we have defined that a bare value refers to the cover range. e.g. maybe we add it a new |
Currently the spec treats
<timeline-range-name>
as an<ident>
and a named range is specified as<timeline-range-name> <length-percentage>
.A range can also be simply a
<length-percentage>
without a name for use with ScrollTimelines, and there's a suggestion for allowing the same for ViewTimelines, for attaching to the entire scroll range.However, there are some use-cases, which are currently not addressed, more specifically: clamping a scroll range at the edges of the scroll container, so the effect, for example, will always start at 0% progress or end at 100% progress, regardless of layout.
Example could be an element that has the following animation:
But when the page loads the target is already partially visible in the viewport. So it will present on load as semi-transparent.
One way to address these could be but can be done if we could use named ranges inside math functions, so authors could write it as:
So questions are:
cc @fantasai @flackr @bramus
The text was updated successfully, but these errors were encountered: