Return to Web Animation Wonderland
summary
A rebuilt interactive Alice demo uses hand‑drawn assets (≈80 hours of work) and replaces a decade of jQuery/polyfills with modern browser features: ScrollTimeline and ViewTimeline drive scroll‑synced animations, the Web Animations API composes animations via animation.onfinish to chain “fall → frightened → emotions → scene cut,” IntersectionObserver cues scenes, prefers‑reduced‑motion is respected, and a CSS View Transitions (Chrome 126+) flow stitches pages (Chromium only unless using the present polyfill). A linear‑easing generator and spring easings reproduce complex bounces without GSAP.
AI-written summary · about
chapters (12)
- 0:00Introduction and background
- 2:06Refactoring a classic project
- 6:04Evaluating the old stack
- 8:21Modern tools and accessibility
- 11:33Intersection observer nuances
- 13:21Spring easing techniques
- 15:03Web Animations API basics
- 17:41Scroll-driven animations
- 20:23View timeline implementation
- 24:08Composing complex animations
- 26:52Multi-page view transitions
- 33:03Closing thoughts on storytelling
