Inside Framer Motion's Layout Animations
summary
Framer Motion claims a one‑size‑fits‑all layout animation by snapshotting layouts with getBoundingClientRect then animating a projected viewport box via transforms so size and children avoid scale distortion; it implements shared‑element transitions, draggable projections and canvas/SVG hacks and generally works but shows a sticky‑children bug when nested projections counteract transforms and it runs synchronous per‑frame JS on the main thread so heavy UI work can still drop frames.
AI-written summary · about
chapters (10)
- 0:00Inside Framer Motion's layout animations
- 3:26The problem of layout animations
- 4:081. Performance 2. Discrete rules
- 8:15FLIP
- 13:24What is layout projection?
- 17:52Shared element transitions
- 19:54Drag
- 23:12Experimental
- 24:18How does it work?
- 27:12Drawbacks
related talks
24mBehind the Illusions: Impossibly high-performance layout animations
36mThe Layout Animations Show
18mReact Animation Made Easy
39mAdvanced & Practical MotionLayout
37mThe Layout Animations Show
29mBringing your app to life - Motion Animations everywhere
46mAnimating the Impossible
40mAdvanced & Practical MotionLayout