(Up-) Scoped Scroll Timelines
(Up-) Scoped Scroll Timelines êŽë š
I keep learning little details about scroll-driven animations!
I started this little journey thinking about if you wanted to do special styling when a page scrolled through a certain section. I thought then that in order to pass scrolling information to descendants, youâd have to do it with --custom-properties. Thatâs sometimes still a decent idea, but itâs not strictly true, as those descendants can inherit a named timeline and tap into that to do styling on themselves.
Then I thought, while thatâs a nice improvement, itâs still limited in the sense that only descendants can tap into a higher-up-the-DOM elementâs timeline. Like an enforced parent/child situation. Turns out this isnât true either, and again thanks to Bramus for showing me how it works.
Since weâre three-deep here on this journey, I figure calling it a series makes sense:
Warning
Fair warning all this stuff is Chrome ânâ friends only right now. But Iâve seen flags in both Safari and Firefox so itâs coming along.
timeline of a totally different element.
Thatâs the rub.
I wrongly assumed it had to be a parent/child thing (or parent/descendant). By default, thatâs true, but if you intentionally move the scope of the timeline to another element up the DOM, you can make it work for any elements.
Demo of that:
The idea above is that you scroll the element on the top and the element below rotates. They are sibling elements though, so this is only possibly by âhoistingâ the scroll-timeline to a higher-in-the-DOM element with timeline-scope so that the other element can pick up on it.
My ridiculous head thought of trying to make a quiz game or some kind of unlocking puzzle with getting scroll positions just right. I proved out the idea here:
There are a bunch of abused CSS tricks in there:
- Declare a custom property with @property so itâs value can be animated
- Make a scrolling element with a
scroll-timeline - Hoist that timeline up to a parent element
- Have the ânumberâ element explicitly use that timeline
- Make the @keyframes animate that
<integer>custom property - Display the number using a pseudo element and
counter() - Use
@container style()queries to check when the custom property is exactly the âanswerâ and update styling.
Phew. It all kinda leads up to that very last step where we can react to a value that came from a user scrolling. It might be a fun little project to build a bike lock number-twister thing with this.