In this example, a view progress timeline named --subjectReveal is defined using the view-timeline-name property on a subject element with a class of "animation". This timeline is then applied to the animation on the same element, using animation-timeline: --subjectReveal;.
To demonstrate the effect of view-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 class="content">
<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 class="subject animation"></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 the subject element as the source of a view progress timeline named --subjectReveal using the view-timeline-name property. The scroll axis is set using view-timeline-axis: x; (Chromium) and view-timeline-axis: horizontal; (Firefox) — this causes the horizontal scrollbar position of the scrolling ancestor element to determine the animation timeline.
The content ancestor element is made to overflow horizontally by laying out its contents using display: flex; and flex-flow: column wrap;.
Also worth noting is that the subject element has an animation-duration applied to it so that the example will work in Firefox.
.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: Arial, Helvetica, sans-serif;
}
p {
font-size: 1.3rem;
line-height: 1.4;
}
.animation {
view-timeline-name: --subjectReveal;
/* Chromium supports the new x/y syntax */
view-timeline-axis: x;
/* Firefox still supports the old horizontal/vertical syntax */
view-timeline-axis: horizontal;
animation-name: appear;
animation-fill-mode: both;
animation-timeline: --subjectReveal;
animation-duration: 1ms; /* Firefox requires this to apply the animation */
}
@keyframes appear {
from {
opacity: 0;
transform: scaleX(0);
}
to {
opacity: 1,
transform: scaleX(1);
}
}
Result
Scroll the horizontal bar at the bottom to see the subject element animate as you scroll.