Animations in a World of States
summary
Concrete techniques for animating state-driven UIs using React Motion, D3, CSS transitions, DOM transforms, and Canvas with a physics engine are compared. The talk explains performance trade-offs (CSS handles ~80–90% of cases, React Motion has trouble with fixed‑time sequences and large lists), shows demos like particle flocking, cancellable enter/exit wrappers, a smooth interpolation controller, and a FLIP-style layer swap, and recommends using requestAnimationFrame with delta timing plus measured performance tradeoffs.
AI-written summary · about
chapters (7)
- 0:00Animation design history
- 5:24Browser animation mechanics
- 16:54State-based animations
- 25:11Dirty animations and DOM
- 33:45Animation responsibility
- 41:26Complex animations breakdown
- 45:19Recommendations and conclusion
