You might not need JS
summary
Claim: many motion tasks move from JS to CSS using scroll-driven animations, the View Transitions API, CSS keyframe math and container queries. Demo rebuilds a portfolio with animation-timeline and ranges (contain, cover, entry, exit), uses sibling-index/sibling-count and trig calc to arc letters, and animates a marquee via container scroll-state. View transitions use document.startViewTransition but create noninteractive snapshots and default crossfades; Firefox lacks support. Limits noted: no reliable once-only play, not for WebGL/canvas. Practical code and browser-compat specifics decide whether to ditch JS.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:19Portfolio with CSS
- 2:22JS to CSS animations
- 4:48Scroll-driven basics
- 6:52Animation ranges
- 10:23When to use scroll-driven
- 11:51View transitions intro
- 13:15How view transitions work
- 16:45View transition states
- 18:11View transition code
- 20:37Animating new elements
- 23:03Replaceable JS animations
- 24:30Live demo arc animation
- 31:26Multiplier animation demo
- 33:10Container queries for scroll
- 34:35Scroll direction demo
- 35:22CSS animations future
related talks
39mModern CSS for Creative Developers
45mCSS tried to come for my Job
40mThe Future with Scroll-Driven Animations in CSS
36mScroll-Driven Animations with CSS
01h 04mLiven up your websites with Scroll-Driven Animations & View Transitions
38mCSS in motion: Animations for fun and profit
10mView Transitions: The brand-new browser API that will blow your mind
53mScroll-Enhanced Experiences