view-timeline-axis
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Theview-timeline-axisCSS property specifies the scroll direction to be used for anamed view progress timeline.
Syntax
/* Logical property values */view-timeline-axis: block;view-timeline-axis: inline;/* Physical property values */view-timeline-axis: y;view-timeline-axis: x;/* Global values */view-timeline-axis: inherit;view-timeline-axis: initial;view-timeline-axis: revert;view-timeline-axis: revert-layer;view-timeline-axis: unset;Values
Description
Theview-timeline-axis property specifies the direction, or<axis>, ofnamed view progress timelines that are based on the element's box.
By default, CSS@keyframes animations progress along the time-based default timeline. When you set the animation progress via a view progress timeline instead,view-timeline-axis specifies the direction that controls the timeline progression.
For view progress timelines, progression of the animation along the timelines is based on the visibility of the element, orsubject. Theview-timeline-axis property is set on the subject.
The subject must be nested inside a scrollable element. If the scrollable 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.
Theview-timeline-axis, along with theview-timeline-inset andview-timeline-name properties, is a component of theview-timeline shorthand property.
Formal definition
| Initial value | block |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |
Formal syntax
view-timeline-axis =
[block|inline|x|y]#
Examples
Defining the axis of the view progress timeline
In this example, a view progress timeline named--subject-reveal is defined using theview-timeline-name property on a subject element with a class of "animation". This timeline is then applied to the animation on the same element, usinganimation-timeline: --subject-reveal;.
To demonstrate the effect ofview-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.
<div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Risus quis varius quam quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. </p> <p> Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate dignissim. Tortor aliquam nulla facilisi cras. </p> <p> A erat nam at lectus urna duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus. </p> <p> Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. </p> <div></div> <p> Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non tellus orci ac auctor augue mauris. </p></div>CSS
In the CSS, we set thesubject element as the source of a view progress timeline named--subject-reveal using theview-timeline-name property.The scroll axis is set usingview-timeline-axis: x;. We also includeview-timeline-axis: horizontal; for browsers that support the non-standard legacyhorizontal andvertical values, rather thanx andy.
Thecontent ancestor element is made to overflow horizontally by laying out its contents usingdisplay: flex; andflex-flow: column wrap;.
.subject { width: 300px; height: 200px; margin: 0 auto; background-color: deeppink;}.content { width: 50%; height: 400px; margin-top: 30px; display: flex; flex-flow: column wrap; gap: 10px;}p { font-family: "Helvetica", "Arial", sans-serif;}p { font-size: 1.3rem; line-height: 1.4;}.animation { view-timeline-name: --subject-reveal; view-timeline-axis: x; view-timeline-axis: horizontal; animation: appear 1ms linear both; animation-timeline: --subject-reveal;}@keyframes appear { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); }}@layer no-support { body::before { display: block; text-align: center; padding: 1em; } @supports not (view-timeline-axis: inherit) { body::before { content: "Your browser doesn't support the `view-timeline-axis` property."; background-color: wheat; } } @supports (view-timeline-axis: horizontal) { body::before { content: "Your browser supports legacy values for the `view-timeline-axis` property."; background-color: yellow; } }}Result
Scroll the horizontal bar at the bottom to see the subject element animate as you scroll.
Specifications
| Specification |
|---|
| Scroll-driven Animations # view-timeline-axis |