Animating the Impossible
summary
Claims that FLIP solves “impossible” UI animations by measuring first and last DOM bounds, applying inverse transforms, then animating the removal of those transforms; demonstrates handling reparenting and keyword values (like auto) by animating transforms instead of layout properties. Uses concrete tools: GSAP Flip plugin to automate getState/animateFrom workflows and experiments with the View Transitions API. Demos show elements visually moving while DOM actually reorders, production examples work, and there is a clear accessibility caveat for vestibular sensitivity.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 3:15UI animation matters
- 12:27Psychology of visual attention
- 18:51Breaking down UI transitions
- 24:48FLIP animation technique
- 29:10Re-parenting elements with FLIP
- 32:27Enter and exit animations
- 35:21When to break FLIP rules
- 36:43Nested FLIP animations
- 37:08FLIP examples
- 39:35View Transitions API
- 41:01Responsible animation
