ScrollTimeline
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The ScrollTimeline
interface of the Web Animations API represents a scroll progress timeline (see CSS scroll-driven animations for more details).
Pass a ScrollTimeline
instance to the Animation()
constructor or the animate()
method to specify it as the timeline that will control the progress of the animation.
Constructor
ScrollTimeline()
Experimental-
Creates a new
ScrollTimeline
object instance.
Instance properties
This interface also inherits the properties of its parent, AnimationTimeline
.
source
Read only Experimental-
Returns a reference to the scrollable element (scroller) whose scroll position is driving the progress of the timeline and therefore the animation.
axis
Read only Experimental-
Returns an enumerated value representing the scroll axis that is driving the progress of the timeline.
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 a class
of box
along a view progress timeline — it animates across the screen as the document scrolls. We output the source
element and scroll axis
to an output
element in the top-right corner.
HTML
The HTML for the example is shown below.
html
<div class="content"></div>
<div class="box"></div>
<div class="output"></div>
CSS
The CSS for the example looks like this:
css
.content {
height: 2000px;
}
.box {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: rebeccapurple;
position: fixed;
top: 20px;
left: 0%;
}
.output {
font-family: Arial, Helvetica, sans-serif;
position: fixed;
top: 5px;
right: 5px;
}
JavaScript
In the JavaScript, we grab references to the box
and output
<div>
s, then create a new ScrollTimeline
, specifying that the element that will drive the scroll timeline progress is the document (<html>
) element, and the scroll axis is the block
axis. We then animate the box
element with the Web Animations API. Last of all, we display the source element and axis in the output
element.
js
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 |
Browser compatibility
BCD tables only load in the browser