Algorithms for Animation
summary
Explains exact formulas and tradeoffs: percent complete interpolation, common easing families and elastic/bounce variants, and when CSS transforms are fastest versus when JavaScript plus requestAnimationFrame is better for controllable play pause reverse. Cites performance targets — under 150 ms perceived response, ~6 ms budget per frame for 60fps, ~1s tolerable load — and demos Chrome DevTools animation controls. Mentions tools and libs: Keynote Principle Envision Adobe Edge, plus Framer Tween Move and GSAP, and notes generated code often needs hand cleanup.
AI-written summary · about
chapters (37)
- 0:00Introduction
- 0:52The elephant in the room
- 2:01What is animation
- 3:16Saturday morning cartoons
- 3:54Movement
- 5:26Animations
- 5:47Perception of affordance
- 7:18Natural user interfaces
- 8:34Motion detection
- 9:21Autoloading
- 9:59Triggering emotions
- 10:56Navigation
- 12:08Cognitive Map
- 12:18Gamification
- 12:48Forms
- 13:12Cognitive Load
- 13:33Context
- 14:07How do you communicate ideas
- 14:17Simple math
- 14:37Basic animation
- 16:40Flexibility
- 16:53Linear Animation
- 18:22Power Functions
- 19:16Brand Guidelines
- 20:15Elasticity
- 20:41Bounce
- 20:58Swarm
- 21:55Tools
- 22:13Tools for prototyping
- 23:21Performance
- 24:12Animation Libraries
- 25:13Custom Animations
- 25:38RequestAnimationFrame
- 27:16Animation Controls
- 28:22Animation Timeline
- 29:22Conclusion
- 29:43Slides
