kizu, 7 months ago

@johannes @bramus

Maybe named timeline range keyframe selectors are close to what you want? https://drafts.csswg.org/scroll-animations-1/#named-range-keyframes

(can't access the nytimes article as it is paywalled)

johannes, 7 months ago

@kizu @bramus As I understand it the keyframe selectors allow us to attach to a percentage of a predefined timeline range, such as cover 100%, but wouldn’t allow us to attach to multiple elements, as the timeline either is a ScrollTimeline or a ViewTimeline.

What I’m looking for is something like

at-keyframes {  
 #element-1 entry 50% {  
 …  
 }  
 #element-2 entry 50% {  
 …  
 }  
}  

kizu, 7 months ago

@johannes @bramus

(Johannes shared the article privately, so I had a chance to look at the animations there)

Looking at this page and how it behaves when resizing the window, it seems that there is just one very long scroll timeline which orchestrates things based on the % scrolled, and not really on the elements' positions. Probably easier to do at this scale than trying to make things “granular” by using multiple view-based animations, which, without the orchestrated 3D, feel more fitting.

kizu, 7 months ago

@johannes @bramus I don't think we have something right now like you mention, where we could have a single keyframes block which does things bases on different elements' positions.

If I were to implement this with view timelines, it would probably be a view timeline per section contributing its part via scoping to both the text that appears and the global animation or something. But yes, can be tricky to work out how to do it, but should be possible.

johannes, 7 months ago

@kizu @bramus Yeah :). I think for now the easiest way to achieve this without JS is to have each section be a known length and use percentages as keyframe selectors.

But, I think there are some use cases the original spec supported, that the new spec don’t.

bramus, 7 months ago

@johannes @kizu can't see the article either, so can't really visualize what should happen.

If you think this is a missing feature, please file an issue at the CSSWG. Stating the problem + a video of what you want is enough to get the discussion going.

johannes, 7 months ago

@bramus @kizu Sorry about that. It slipped my mind that the article was behind a paywall. Shared a link privately so you can see for yourself. :)

It might not be the best example, but the idea is that you animate something to keyframes or offsets based on a set of elements, and not just one as in ViewTimeline.

I just wanted to check if there was something I had missed. I might file an issue if I can think of a way to make it fit with the current View/ScrollTimeline model.