Summary - Scroll story
Build a scroll-driven story with scroll-based animations.
Tools of a scroll story
In this unit you combined four tools. animation-timeline binds the animation to a timeline; scroll() uses the scroll position, view() uses the element's position in the viewport. animation-range sets the animation's start and end.
Add scroll-snap-type and scroll-snap-align, and you can build scroll stories, progress bars, and snapping galleries. No JavaScript needed.
How is a scroll story built?
A scroll story has three parts. First, pick the page's root scroll with animation-timeline: scroll(root). Then define each scene's visual change with @keyframes.
Finally, set each scene's scroll range with animation-range; this lets you write pieces like scroll 30%-60%: card rotates. More scenes make a richer story.
Exercise Top progress bar of the page
Write two blocks. First, an @keyframes block (any name) with transform: scaleX(0) in the from keyframe and transform: scaleX(1) in the to keyframe. Second, a CSS block for the .bar selector; this block must contain the transform-origin: left and animation-timeline: scroll(root) declarations.
Show example solution
/* top progress bar of the page */
@keyframes grow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.bar {
transform-origin: left;
animation: 1s linear grow;
animation-timeline: scroll(root);
}Exercise Horizontal snap gallery
Write two blocks. First, a CSS block for the .gallery selector; this block must contain the scroll-snap-type: x mandatory declaration. Second, a CSS block for the .gallery > * selector; this block must contain the scroll-snap-align: center declaration.
Show example solution
/* horizontal snap gallery */
.gallery {
scroll-snap-type: x mandatory;
}
.gallery > * {
scroll-snap-align: center;
}Test yourself
-
Match each concept to its meaning
- scroll()
- Timeline bound to scroll position
- view()
- Timeline bound to element visibility
- animation-range
- Start and end range
- scroll-snap-type
- Axis and strictness
- animation-timeline
- Binds animation to a timeline
-
Write the progress bar timeline
/* page root scroll */ .bar { animation: 1s linear grow; animation-timeline: scroll(____); }Show answer
/* page root scroll */ .bar { animation: 1s linear grow; animation-timeline: scroll(root); }