Functional Animation
summary
Argues that animation must be part of the core UX not a garnish and demonstrates concrete implementations: a morphing contact form that threads three states into one fluid component, an interactive itinerary map that lets users build and send trips, a responsive Book of Kells SVG that scales and stays tiny, and a playable mini‑game built with SVG + React + GreenSock that actually runs. Gives performance rules—use opacity and transforms and hardware‑accelerate—and accessibility and tooling advice (GreenSock, React Motion); the demos work and quantify user benefits.
AI-written summary · about
chapters (40)
- 0:00Introduction
- 0:53Saccade
- 1:33Why is this important
- 2:49Animation gets a bad rap
- 4:10Invisible Animation
- 5:35Cognitive Leaks
- 7:39UX Pattern
- 8:17Isolation
- 8:54Modals
- 9:36Brute Force UX
- 10:12Investigate modal
- 10:46Bake animation into an experience
- 11:27Use case Barcelona
- 14:34Do you hate animation
- 14:44Animation can be informative
- 15:15Animation needs a hero
- 16:05React Motion
- 17:07Bouncy Ball Demo
- 18:26Form Loader
- 19:49Perceived Performance
- 20:38Capturing Attention
- 21:17Spatial Awareness
- 21:31Code Drops Demo
- 22:08Drag Drop Demo
- 22:39Performance
- 23:26Performance Demo
- 24:36Netflix
- 24:52Immersive Animation
- 25:48SVG
- 26:34SVG Pros
- 30:21Responsive SVG
- 31:49Performance hits
- 32:30GreenSock
- 33:18Timeline
- 34:35Timeline Demo
- 35:46SVG DOM
- 36:15Responsive Design
- 37:56Accessibility
- 39:08Hipster Elephant
- 40:02Web Technologies
