ScrollTimeline
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
TheScrollTimeline interface of theWeb Animations API represents a scroll progress timeline (seeCSS scroll-driven animations for more details).
Pass aScrollTimeline instance to theAnimation() constructor or theanimate() method to specify it as the timeline that will control the progress of the animation.
Constructor
ScrollTimeline()Creates a new
ScrollTimelineobject instance.
Instance properties
This interface also inherits the properties of its parent,AnimationTimeline.
Instance methods
This interface inherits the methods of its parent,AnimationTimeline.
Examples
Displaying the source and axis of a scroll progress timeline
In this example, we animate an element with aclass ofbox along a view progress timeline — it animates across the screen as the document scrolls. We output thesource element and scrollaxis to anoutput element in the top-right corner.
HTML
The HTML for the example is shown below.
<div></div><div></div><div></div>CSS
The CSS for the example looks like this:
.content { height: 2000px;}.box { width: 100px; height: 100px; border-radius: 10px; background-color: rebeccapurple; position: fixed; top: 20px; left: 0%;}.output { font-family: "Helvetica", "Arial", sans-serif; position: fixed; top: 5px; right: 5px;}JavaScript
In the JavaScript, we grab references to thebox andoutput<div>s, then create a newScrollTimeline, specifying that the element that will drive the scroll timeline progress is the document (<html>) element, and the scroll axis is theblock axis. We then animate thebox element with the Web Animations API. Last of all, we display the source element and axis in theoutput element.
const box = document.querySelector(".box");const output = document.querySelector(".output");const timeline = new ScrollTimeline({ source: document.documentElement, axis: "block",});box.animate( { rotate: ["0deg", "720deg"], left: ["0%", "100%"], }, { timeline, },);output.textContent = `Timeline source element: ${timeline.source.nodeName}. Timeline scroll axis: ${timeline.axis}`;Result
Scroll to see the box being animated.
Specifications
| Specification |
|---|
| Scroll-driven Animations # scrolltimeline-interface |