scroll-timeline-axis
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The scroll-timeline-axis CSS property is used to specify the scrollbar direction that will be used to provide the timeline for a named scroll progress timeline animation, which is progressed through by scrolling a scrollable element (scroller) between top and bottom (or left and right). scroll-timeline is set on the scroller that will provide the timeline. See CSS scroll-driven animations for more details.
Note: If the scroller element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no scroll progress timeline will be created.
The scroll-timeline-axis and scroll-timeline-name properties can also be set using the scroll-timeline shorthand property.
Syntax
/* Logical property values */
scroll-timeline-axis: block;
scroll-timeline-axis: inline;
/* Non-logical property values */
scroll-timeline-axis: y;
scroll-timeline-axis: x;
Values
Allowed values for scroll-timeline-axis are:
block-
The scrollbar on the block axis of the scroller element, which is the axis in the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as
y, while for vertical writing modes, it is the same asx. This is the default value. inline-
The scrollbar on the inline axis of the scroller element, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as
x, while for vertical writing modes, this is the same asy. y-
The scrollbar on the vertical axis of the scroller element.
x-
The scrollbar on the horizontal axis of the scroller element.
Formal definition
| Initial value | block |
|---|---|
| Applies to | scroll containers |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |
Formal syntax
Examples
Defining the axis of the scroll progress timeline
In this example, a scroll progress timeline named --myScroller is defined using the scroll-timeline-name property on the :root element (<html>). This timeline is then applied to the animation on the element with the animation class using animation-timeline: --myScroller.
To demonstrate the effect of scroll-timeline-axis, a horizontal (non-default) scrollbar is used in this example to drive the animation.
HTML
The HTML for the example is shown below.
<body>
<div class="content"></div>
<div class="box animation"></div>
</body>
CSS
The CSS for the container sets the :root as the source of a scroll progress timeline named --myScroller using the scroll-timeline-name property.
The scroll axis is set using scroll-timeline-axis: x; (Chromium) and scroll-timeline-axis: horizontal; (Firefox) — this causes the horizontal scrollbar position to determine the animation timeline.
The width of the .content element is set to a large value to make it overflow the :root element.
Also worth noting is that the .animation element has the timeline applied to it using animation-timeline: --myScroller;, and it also has an animation-duration applied to it so that the example will work in Firefox.
:root {
scroll-timeline-name: --myScroller;
/* Chromium supports the new x/y syntax */
scroll-timeline-axis: x;
/* Firefox still supports the old horizontal/vertical syntax */
scroll-timeline-axis: horizontal;
}
body {
margin: 0;
overflow-y: hidden;
}
.content {
height: 100vh;
width: 2000px;
}
.box {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: rebeccapurple;
position: fixed;
top: 25px;
left: 25px;
}
.animation {
animation: rotate-appear;
animation-timeline: --myScroller;
animation-duration: 1ms; /* Firefox requires this to apply the animation */
}
@keyframes rotate-appear {
from {
rotate: 0deg;
top: 0%;
}
to {
rotate: 720deg;
top: 100%;
}
}
Result
Scroll the horizontal bar at the bottom to see the square animate as you scroll.
Specifications
| Specification |
|---|
| Scroll-driven Animations # propdef-scroll-timeline-axis |
Browser compatibility
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
scroll-timeline-axis | |||||||||||
block | |||||||||||
inline | |||||||||||
x | |||||||||||
y | |||||||||||