Behind the Illusions: Impossibly high-performance layout animations
summary
Demonstrates concrete techniques to animate layout at 60 frames per second using measured deltas and transforms rather than top/left or height/width, specifically implementing the FLIP (First Last Invert Play) steps with getBoundingClientRect to compute deltas, math to adjust border-radius during scaling, inverse-rotation for curved motion, containment/scale-inverse patterns to animate size, pseudoelements and CSS variables for backgrounds, and a released library flipping v1 (Web Animations API and adapters) that automates these demos and runs smoothly.
AI-written summary · about
chapters (14)
- 0:00Intro
- 2:35Illusions
- 4:31The goal
- 5:41Measure
- 6:17Flip Technique
- 6:29Get Bounding Clients
- 8:07Relative Flipping
- 10:13CSS patterns
- 12:45Finite state machines
- 13:19Border radius
- 14:11Borderradius animation
- 15:23Inverse rotations
- 16:46CSS containment
- 18:43Flip library
