Scroll-driven Animations

Intermediate

Scroll-driven Animations connect CSS animation progress to a scroll-related timeline instead of the ordinary document timeline. The animation still defines what changes, while the scroll-driven timeline determines when progress advances.

This lesson is the primary Foxipa owner for scroll timelines, view timelines, timeline names and axes, animation-timeline, animation-range, scroll-progress and view-progress ranges, and the interaction between those timelines and CSS Animations. It does not re-teach keyframe authoring, generic animation controls, overflow fundamentals, or scroll snapping.

The central model

A scroll-driven animation has two separate jobs: CSS Animations supplies the animated value sequence, while a scroll-related timeline maps scrolling progress to animation progress. This separation is the key to understanding the feature without turning the lesson into a second CSS Animations lesson.

?

Scroll progress is a timeline, not a snap point

A scroll progress timeline represents progress through the usable scroll range of a scroll container. It is continuous in the model: moving through the range advances animation progress rather than selecting a discrete snap destination.

?

The scroll container boundary

The timeline is associated with a scroll container. Establishing overflow and creating a scrollable range belongs to CSS Overflow; this lesson consumes that mechanism rather than redefining scroll-container formation.

?

animation-timeline() and named timelines

A scroll-driven animation can select a timeline directly, and authors can give a timeline a name so multiple animations can refer to the same progress source. Naming creates an explicit relationship rather than relying on an incidental element.

?

Timeline axis

Scroll timelines have an axis. The axis determines which scrolling direction contributes progress. The feature is therefore about mapping a particular scroll axis to animation time, not about redefining physical layout axes.

?

Nearest relevant scroll container

Scroll-driven animation timelines are associated with scroll containers according to the specification’s timeline attachment rules. Authors should reason from the actual scroll-container relationship instead of assuming that the viewport is always the source.

?

View progress timelines

A view timeline relates animation progress to an element’s movement through a scrollport. This differs from a scroll progress timeline, which follows the scroll position of the scrolling content itself.

?

Named view timelines

A view timeline can be named so other animation declarations can select that timeline explicitly. This is useful when the animated element and the element whose view progress is measured are not the same conceptual role.

?

animation-range

animation-range controls which portion of a timeline maps to the animation. It lets authors express that an animation should begin or end at a selected timeline range instead of always consuming the entire timeline.

?

Named range concepts

Scroll-driven Animations defines named range concepts for scroll and view progress. These names let authors reason in semantic timeline regions instead of treating every range as an arbitrary pair of percentages.

?

Timeline direction and writing modes

Timeline axes interact with CSS writing-mode concepts. The scroll-driven lesson uses the axis definitions supplied by the timeline specification; Writing Modes remains the owner of writing direction and logical axes themselves.

?

Scroll-driven animations still use ordinary keyframes

The timeline source changes how animation progress is supplied, not how authored keyframes are written. The Animations owner therefore remains responsible for @keyframes structure and animation controls.

?

Scroll-driven animation and easing

Easing functions can still affect progress between keyframes. The scroll timeline supplies timeline progress, while the easing function transforms that progress for the animation’s interpolation.

?

Scroll-driven animation and transitions

A transition remains a reaction to a style change. A scroll-driven animation is driven by a timeline. A project can use both, but they answer different questions and should not be combined into one conceptual owner.

?

Scroll Snap is a separate mechanism

Scroll Snap controls snap positions and panning behavior. A scroll-driven animation can observe scroll progress on the same scrolling interface, but it does not define where scrolling should settle.

?

Animation ranges are not scroll snapping

animation-range selects a timeline interval. It does not create a physical snap point or force the user agent to settle scrolling at that interval.

<div class="scroller"><div class="content"><div class="box">? snap required</div></div></div>

Debugging: identify the timeline first

When an animation appears frozen, first determine whether the selected timeline exists, whether it has usable progress, and whether the animation is mapped into that range. Only then inspect keyframes and property interpolation.

?

Reduced motion remains a preference concern

A scroll-driven effect can be motion-heavy even though the trigger is scrolling. The user-preference semantics for prefers-reduced-motion remain owned by Media Features / User Preferences; this lesson only demonstrates how that condition can select or disable a motion effect.

?

Developing features and implementation status

Scroll-driven Animations is a Working Draft. The core model is valuable to learn, but draft status means authors should verify current browser support and avoid treating every developing detail as equally interoperable.

What this lesson deliberately does not own

This lesson does not teach scroll-container creation, overflow clipping, scroll snapping, keyframe authoring, generic animation controls, transforms, easing functions, or script-driven Web Animations. Those concepts remain in their established owners.

?

Decision tree

Use this decision tree when choosing the relevant Foxipa lesson: if the question is how content becomes scrollable, use Overflow; if it is where scrolling settles, use Scroll Snap; if it is how scrolling drives animation progress, use this lesson; if it is how keyframes and ordinary animation controls work, use CSS Animations.

?

Final rule: a scroll-driven animation is not “animation plus some scrolling properties.” It is a composition of an existing CSS animation with a scroll-related progress timeline. Keeping those responsibilities separate is the main repetition guard for this lesson.