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);
}

Next lesson: What is anchor positioning?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies