Summary

  • The W3C’s first public Scroll-linked Animations draft of October 2022 defined scroll progress and view progress timelines that could drive animation by position or visibility.
  • By June 2023 the work appeared as Scroll-driven Animations, with ScrollTimeline, ViewTimeline and animation-timeline spelling out two ways to connect a reader’s movement to a visual sequence.

An illustrated article wants a chart to build itself as the reader reaches it. On the first pass, a timed animation can do that. On the second pass, the reader scrolls back up to check one bar and finds a finished performance: the chart is at its final frame, the clock long gone, the explanation stranded somewhere above. A web page that tells a story in space has been taking instructions from a clock. The audience controls the scroll wheel; the clock keeps insisting it is the director.

The W3C’s first public draft of 25 October 2022 called the work Scroll-linked Animations. It offered two different measures. A scroll progress timeline follows a scroll container from its startmost to its endmost position, mapping that journey from zero to one hundred percent. A view progress timeline follows how a particular element enters, occupies and leaves the visible scrollport. The first asks, “How far through this container?” The second asks, “Where is this particular actor in the window?”

That distinction matters in a long article. A reading-progress line at the top of the page cares about the whole document’s travel. An illustration that appears halfway down cares about its own entrance and exit. Give both the same clock and one of them will perform at the wrong moment. Give each the appropriate spatial measure and the reader can pause, continue or reverse the sequence by moving the page. The animation becomes a passenger in the reading journey rather than a separate train with its own timetable.

The 8 December 2022 Working Draft developed the CSS routes: scroll() can refer to a scroll progress timeline; named timelines and view timelines can attach effects to the relevant source. The page author still chooses what moves, by how much and over which range. The browser calculates the progress from scrolling or visibility. If there is no scrollable overflow, a scroll timeline can be inactive. The conductor cannot wave a baton at a train that has no track.

The 28 April 2023 Working Draft carried the model forward under the name Scroll-driven Animations. The change in title says something useful about the mechanism: this is an animation whose progress is driven by the reader’s position, not merely a decorative effect that happens to notice a scroll event. It can be expressed through CSS or through the Web Animations interfaces. The page supplies an effect; the browser supplies a timeline tied to a measurable place.

The 6 June 2023 Working Draft described ScrollTimeline and ViewTimeline as different sources of progress and connected them to animation-timeline. The progress is finite. A timed animation measures duration in seconds; a scroll-driven one occupies a range of travel. That changes how an author thinks about beginnings and endings. A bar can fill over the route through an article. A photograph can sharpen while its box passes through the viewport. Pull the page upward and the sequence can move backward with it.

The W3C publication history places the first public draft in October 2022 and the published revisions through June 2023. Across those versions, the practical boundary stayed sharp. The browser can calculate where the reader is. It cannot decide whether making a chart dance improves the explanation. An editor who animates every heading has turned the scrollbar into a vaudeville manager. An editor who ties one useful reveal to the reader’s place has given a complex figure its own pacing.

The reader wins when motion stays answerable to the page. Stop scrolling and the illustration stops. Go back and it goes back. The clock can take the afternoon off; the reader is conducting this performance.