Animating the Impossible
summary
Demonstrates animating between different layout modes without forcing layout reflows by using GSAP Flip plugin and the FLIP technique (first-last-invert-play), measuring bounding boxes, re-parenting DOM nodes, then animating with transforms and opacity for GPU-composited performance. Shows handling entering/leaving items with onEnter/onLeave callbacks, nested flips, and a real ESLint cursor example that adapts to varying text lengths and screen sizes. Cites UCI finding that cross-fade with a flash makes changes take about five times longer to spot.
AI-written summary · about
chapters (20)
- 0:00Introduction and warning
- 1:27Why GSAP for animation
- 4:44UI animation challenges
- 8:16Psychology of magic and UX
- 12:59Types of UI animation
- 13:20Exit animations with GSAP
- 15:00Entrance animations demo
- 16:06Browser rendering pipeline
- 18:23Animating from position
- 20:12Introducing FLIP technique
- 23:14FLIP in GSAP demo
- 23:58Re-parenting elements
- 26:38Adding and deleting elements
- 27:27Handling enter and leave
- 29:01When to break animation rules
- 30:31FLIP use cases
- 32:04Real-world FLIP example
- 33:08Responsible animation use
- 34:24Match media feature
- 35:31Q&A on animation
