Modern CSS for Creative Developers
summary
Shows concrete results: Scroll-Driven Animations move scroll timing off the main thread and replace JS parallax demos (pure-CSS codepens with parallax, scale and clip variants), but support is missing in Firefox and Safari and devtools are sparse. View Transitions API (the View Transitions / FLIP-like snapshot approach) uses document.startViewTransition, creates cross‑page morphs by treating elements as images so images become bitmaps, and exposes predictable pitfalls — aspect-ratio glitches, unique names, and workaround patterns like the only‑child trick — mostly works but needs browser polish.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 2:48Scroll-driven animations
- 4:35Animation timelines and keywords
- 7:57Development patterns and debugging
- 9:06Practical animation examples
- 14:30Introduction to view transitions
- 20:18Advanced view transition techniques
- 25:39Interactive conference demo
related talks
45mCSS tried to come for my Job
36mYou might not need JS
36mScroll-Driven Animations with CSS
21mCSS Between the Pages
01h 04mLiven up your websites with Scroll-Driven Animations & View Transitions
53mScroll-Enhanced Experiences
40mThe Future with Scroll-Driven Animations in CSS
10mView Transitions: The brand-new browser API that will blow your mind