Waypoint’s schedule is long: two days, four tracks, sixty sessions. The team wants two small touches: a thin progress bar under the header showing how far down the schedule you are, and speaker cards that ease into view as you scroll to them. The old way was a scroll event listener that read scrollY, did some arithmetic and wrote styles, sixty times a second, on the main thread, competing with everything else.
Scroll-driven animations let CSS do it. You write a normal @keyframes animation and swap its clock: instead of time, its progress comes from scrolling.
A scroll progress timeline, scroll(), goes from 0% to 100% as a scroll container scrolls from top to bottom. scroll(root) is the document; scroll(nearest), the default, is the nearest scrolling ancestor.
A view progress timeline, view(), follows one element as it travels through its scroll container’s visible area (the scrollport): from the moment its edge peeks in at the bottom to the moment it leaves at the top.
@keyframes grow {\n from { scale: 0 1; }\n to { scale: 1 1; }\n}\n\n.progress {\n position: fixed;\n inset: 0 0 auto;\n height: 3px;\n background: var(--track-design);\n transform-origin: 0 50%;\n animation: grow linear both;\n animation-timeline: scroll(root);\n}At the top of the page the bar is scaled to zero; at the bottom it’s full width; anywhere in between it’s exactly proportional. linear matters here: with the default ease, the bar would race ahead in the middle and crawl at the ends. both keeps the first and last keyframes applied outside the range.
For the speaker cards, a view timeline is the right clock, and animation-range chooses which part of the card’s path runs the animation:
@keyframes reveal {\n from { opacity: 0; translate: 0 24px; }\n to { opacity: 1; translate: 0 0; }\n}\n\n.speaker {\n animation: reveal linear both;\n animation-timeline: view();\n animation-range: entry 0% cover 30%;\n}The named ranges describe the element’s path: entry while it crosses the bottom edge, contain while it’s fully inside (or fully covering, if it’s taller), exit while it crosses the top edge, and cover for the whole trip from first pixel in to last pixel out. entry 0% cover 30% means “start as the card begins to enter, finish when it’s 30% through its whole trip”, so each card is fully visible well before the user reaches it.
Here’s the support picture in October 2026: scroll-driven animations have been in Chromium since version 115 (2023) and in Safari since 26 (September 2025). Firefox has an implementation behind a flag, and it’s an Interop 2026 focus area, but stable Firefox doesn’t support it yet, so the feature isn’t Baseline.
\nThat shapes how you write it. The reveal keyframes start at opacity: 0, and in a browser that understands animation-timeline, that’s fine. In one that doesn’t, animation: reveal linear both with no timeline is a zero-duration time animation that ends at its last keyframe, so the cards still show. Don’t rely on that subtlety; make the intent explicit:
@supports (animation-timeline: view()) {\n @media (prefers-reduced-motion: no-preference) {\n .speaker {\n animation: reveal linear both;\n animation-timeline: view();\n animation-range: entry 0% cover 30%;\n }\n }\n}Unsupported browsers and reduced-motion users get the plain, fully visible grid. Supported browsers get the reveal.
\n\nYou can also name timelines (view-timeline-name: --speaker) so another element can follow them, and use timeline-scope to make a name visible higher in the tree. Reach for those when one element’s scroll position should drive a different element; for self-contained effects, anonymous scroll() and view() are enough.
In the exercise, add the reading progress bar and the speaker reveal, in the right order, guarded by @supports. The checks read the computed timelines and ranges. Next, you’ll step back from individual effects and organise the whole stylesheet so a team can work on it.
animation-timeline: scroll() ties an animation’s progress to how far a scroll container has scrolled; view() ties it to an element’s passage through the visible area.","animation-range picks which part of the timeline plays the animation, for example entry 0% cover 30% for a reveal that finishes soon after the element appears.","The animation shorthand resets animation-timeline, so declare the timeline after the shorthand.","Scroll-driven animations work in Chromium and Safari 26 but not yet in stable Firefox, so wrap them in @supports and make sure content is fully visible without them."],"further":[{"title":"Scroll-driven animation timelines (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines"},{"title":"animation-timeline (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timeline"},{"title":"animation-range (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-range"}],"quiz":[{"q":"The progress bar never moves. Why?
\n.progress {\n animation-timeline: scroll(root);\n animation: grow linear both;\n}scroll(root) isn’t valid; it should be scroll(html).","why":"root is the correct keyword for the document’s scroller; html isn’t accepted there."},{"text":"The animation shorthand comes second and resets animation-timeline to auto, so the animation runs on time with no duration.","why":"Correct. The shorthand resets every animation longhand, including the timeline. Put animation-timeline after it."},{"text":"Scroll-driven animations need animation-duration: 1s.","why":"Duration doesn’t apply to scroll timelines; progress comes from scroll position. auto is fine."}],"answer":1},{"q":"A speaker card should fade in as it enters the viewport and be fully visible by the time 30% of it is showing. Which declarations?
","options":[{"text":"animation-timeline: scroll(); animation-range: 0% 30%;","why":"A scroll() timeline tracks the whole page’s scroll position, so the range would refer to the first 30% of the page, not to the card."},{"text":"animation-timeline: view(); animation-range: exit 0% exit 30%;","why":"The exit range is when the card is leaving the viewport, which is the opposite end of its path."},{"text":"animation-timeline: view(); animation-range: entry 0% cover 30%;","why":"Correct. view() tracks the card’s visibility, and the range starts as it begins to enter and ends 30% into its full cover range."}],"answer":2},{"q":"In 2026, a teammate wants to make the speaker grid hidden until scroll-driven reveals fade each card in. What’s the main risk?
","options":[{"text":"In browsers without scroll timelines, such as stable Firefox, a card that starts at opacity 0 may never become visible.","why":"Correct. Scroll-driven animations aren’t Baseline yet. Put the hidden starting state inside@supports (animation-timeline: view()) so unsupported browsers show the cards normally."},{"text":"Scroll-driven animations always block the main thread and cause jank.","why":"Animations of compositor-friendly properties like opacity and transform can run off the main thread; that’s one of their advantages over scroll listeners."},{"text":"Screen readers announce every frame of the animation.","why":"Screen readers don’t announce visual animation frames."},{"text":"Each card needs its own named timeline.","why":"An anonymous view() timeline is per element automatically; names are only needed to share a timeline between elements."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"\nThe grow and reveal keyframes are ready. Wire them to scrolling:
grow runs on the document’s scroll timeline, with linear timing and a fill mode that holds the keyframes (both)..speaker run reveal on its view timeline, from the start of its entry to 30% of its cover range.@supports (animation-timeline: view()) so browsers without support show the plain page. (Wrapping them in prefers-reduced-motion: no-preference too is recommended.)animation: reveal linear both; then animation-timeline: view(); and animation-range: ….","@supports (animation-timeline: view()) { .progress { animation: grow linear both; animation-timeline: scroll(root); } .speaker { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } }"],"explanation":"The starter’s bar never moved because the animation shorthand came after animation-timeline and reset it to auto, leaving a zero-length time animation. Declaring the timeline after the shorthand ties grow to the root scroller, and linear keeps the bar proportional to scroll distance. Each speaker’s anonymous view() timeline tracks that card through the viewport, and entry 0% cover 30% makes the reveal finish shortly after the card appears. The @supports guard keeps the reveal out of browsers that can’t run it, such as stable Firefox in 2026, where the cards simply stay visible.