Return to Web Animation Wonderland
summary
A live refactor of a decade‑old Alice demo shows concrete replacements for heavy jQuery stacks: CSS animations, the web animations API, scroll timelines and view transitions drive scrolling, visibility‑tied and navigation animations. IntersectionObserver, prefers‑reduced‑motion, sprite sheets and a scroll polyfill are used; linear easing coordinates produce springs without GSAP. Demos run in Chromium 126+ (polyfill covers others), the refactor works and noticeably shrinks JS and runtime cost.
AI-written summary · about
chapters (16)
- 0:00Introduction to web animation
- 1:10Rachel Nabors' journey
- 4:01Alice in Videoland legacy
- 8:32Modernizing Alice with standards
- 10:39Respecting reduced motion
- 12:06Intersection Observer for animations
- 14:33Spring easings and bouncy
- 16:16Web Animations API refresher
- 19:30Scroll-driven animations intro
- 23:02View-driven animations explained
- 26:36Chaining animations with WAAPI
- 27:59Polyfills and browser support
- 29:28CSS 5 and view transitions
- 30:52MPA view transitions demo
- 32:58Why use CSS/WAAPI over libraries
- 36:51Closing thoughts and Alice’s return
related talks
39mReturn to Web Animation Wonderland
15mWeb Animations: Tools and Techniques
40mAlice in Web Animations API Land
53mScroll-Enhanced Experiences
39mModern CSS for Creative Developers
01h 04mLiven up your websites with Scroll-Driven Animations & View Transitions
46mThe Web in Motion
45mCSS tried to come for my Job