Understanding scroll-driven animations with animation-timeline
Using scroll() to track scroll container position
Using view() to track element visibility
Creating scroll progress indicators
Building fade-in and slide-in effects on scroll
Understanding animation-range for viewport control
Creating parallax effects with scroll timelines
Building practical patterns: progress bars, reveals, staggered animations
Introduction to Scroll-Driven Animations
Scroll-driven animations are a cutting-edge CSS feature that allows animations to be controlled by scroll position—no
JavaScript required! Before this feature, creating scroll-based animations required IntersectionObserver API, scroll
event listeners, or third-party libraries like GSAP ScrollTrigger.
With the new animation-timeline property, you can create animations that respond to page scroll
(scroll()) or element visibility (view()). These animations are GPU-accelerated and run
on the compositor thread, making them incredibly performant.
Animation Timeline Basics
The animation-timeline property replaces the default time-based timeline with a scroll-based one.
There are two main timeline types:
The animation-range property controls when the animation starts and stops during the element's journey
through the viewport. Here, it fades in from when it enters (entry 0%) until it's 30% covered
(cover 30%).
Slide In Effects
Combine transforms with opacity for slide-in effects. Elements can slide from any direction as they enter the viewport.
/* Slide in from left */
.slide-in-left {
opacity: 0;
transform: translateX(-100px);
animation: slide-in-left-anim linear forwards;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
@keyframes slide-in-left-anim {
to {
opacity: 1;
transform: translateX(0);
}
}
/* Slide in from right */
.slide-in-right {
opacity: 0;
transform: translateX(100px);
animation: slide-in-right-anim linear forwards;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
@keyframes slide-in-right-anim {
to {
opacity: 1;
transform: translateX(0);
}
}
Animation Range Explained
The animation-range property is crucial for scroll-driven animations. It defines when the animation
starts and stops relative to the element's position in the viewport.
/* Named ranges for view() timeline */
animation-range: entry 0% cover 50%;
/* entry: element entering viewport
cover: element covering/within viewport
exit: element leaving viewport
contain: viewport fully contains element */
/* Percentage ranges */
animation-range: 0% 100%; /* Full journey */
animation-range: 25% 75%; /* Middle 50% */
/* Common patterns */
animation-range: entry 0% entry 100%; /* While entering */
animation-range: cover 0% cover 100%; /* While in view */
animation-range: exit 0% exit 100%; /* While exiting */
animation-range: entry 0% exit 100%; /* Entire journey */
Scale and Rotate on Scroll
You can animate any transform property based on scroll position. These effects add visual interest to page scrolling.
/* Scale up on scroll */
.scale-up {
transform: scale(0.5);
opacity: 0;
animation: scale-up-anim linear forwards;
animation-timeline: view();
animation-range: entry 0% cover 50%;
}
@keyframes scale-up-anim {
to {
transform: scale(1);
opacity: 1;
}
}
/* Rotate on scroll */
.rotate-scroll {
animation: rotate-scroll-anim linear;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}
@keyframes rotate-scroll-anim {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Parallax Effects
Create parallax effects where background elements move at different speeds than the scroll. This adds depth to your designs.