Scroll-Driven Animations with CSS

on YouTube ↗36m

" summary

Claim: CSS scroll-driven animations let animations scrub with scroll offset without JavaScript, using a new scroll() timeline and view() timeline. Demos include a working Cover Flow implementation, a reading-progress bar, cover-to-header shrink, and sync to video/3D objects — all running on the compositor (Chrome 115+, Safari TP, Firefox nightly experimental) so animations avoid main‑thread jank. Limitations: some things still run on the main thread (clip path, custom properties), animation-range/view ranges control when animations start and end.

AI-written summary · about

" chapters (33)

1. 0:00Introduction
2. 1:06What are scroll-driven animations
3. 2:30Why avoid JS for scroll animations
4. 4:43CSS animations and compositor advantage
5. 5:49Scroll-driven animation spec
6. 6:55Respecting user motion preferences
7. 7:36Progressive enhancement and browser support
8. 7:59Understanding scroll timelines
9. 9:44Creating scroll timeline with CSS
10. 11:53Simplifying scroll timeline syntax
11. 12:59Named scroll timelines and nested scrollers
12. 14:21Demo fixing header with scroll animation
13. 15:45Animation range for scroll distance control
14. 17:13Introducing view timelines
15. 18:16Demo: view timeline with album covers
16. 20:21Reducing view timeline instances with named timelines
17. 21:24Animation range values for view timelines
18. 23:10Visualizing view timeline ranges
19. 24:32Combining entry and exit animations
20. 25:55Demo: partial entry animations
21. 26:57Extended keyframes for entry and exit effects
22. 27:17Using calc with animation ranges
23. 28:01Common pitfalls with animation shorthand
24. 28:41Broadening timeline scope for non-child elements
25. 29:48Scroll-driven vs scroll-triggered animations
26. 30:28Hacking scroll-triggered effects with style queries
27. 31:35Future CSS animation triggers
28. 31:55Syncing videos and 3D objects to scroll
29. 32:17Scroll-driven view transitions demo
30. 32:38Limitations of compositor animations
31. 33:44Debugging scroll animations in DevTools
32. 34:28Chrome extension for scroll debugging
33. 35:11Resources and closing

" related talks

• 29mScroll linked Animations with CSSBramus Van Damme · CSSCamp 2021
• 40mThe Future with Scroll-Driven Animations in CSSShruti Balasa · CityJS New Delhi 2024
• 53mScroll-Enhanced ExperiencesCarmen Ansio · CSSDAY 2024
• 07mScroll-Linked AnimationsBramus Van Damme · Full Stack Europe 2022
• 01h 04mLiven up your websites with Scroll-Driven Animations & View TransitionsBramus Van Damme · CSS Day 2023
• 39mModern CSS for Creative DevelopersCyd Stumpel · beyond tellerrand Düsseldorf 2025
• 36mYou might not need JSCyd Stumpel · JSHeroes 2026
• 38mReturn to Web Animation WonderlandRachel Nabors · Future Frontend 2024