Senior LevelCSS & Modern Layouts
How do CSS scroll-driven animations work with animation-timeline?
❓ Interview Prompt: Explain scroll-timeline, view-timeline, and binding CSS animations to scroll position instead of time.
Scroll-driven animations bind CSS @keyframes animations to scroll position instead of time duration:
Two Timeline Types:
1
`scroll()` timeline: Animation progress tracks the scroll position of a scroll container.
2
`view()` timeline: Animation progress tracks an element's visibility in the viewport (entry → exit).
Benefits:
•
No JavaScript scroll event listeners needed.
•
Runs on the compositor thread (smooth 60fps).
•
Works with existing @keyframes animations.
Code Implementation Example
css
/* Progress bar tracks page scroll position */
.scroll-progress {
animation: grow-width linear;
animation-timeline: scroll(root);
}
@keyframes grow-width {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Fade-in as element enters viewport */
.reveal {
animation: fade-in linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}💡Scroll-linked progress bar and viewport-entry fade-in animation.
🎯 Interview Key Takeaway
Scroll-driven animations replace JavaScript scroll handlers with GPU-composited CSS animations for 60fps scroll effects.
#Scroll Animation#animation-timeline#Performance#Senior
Back to all CSS & Modern Layouts Questions→