Animating the Impossible
summary
Claims that the FLIP (First‑Last‑Invert‑Play) technique makes “impossible” UI moves feasible by measuring getBoundingClientRect before/after and animating deltas, demonstrates vanilla JS and the GSAP Flip plugin (handles nested transforms, reparenting, enter/leave hooks), and shows a working card reparenting/shuffle demo plus an add/delete flow that preserves motion. Demos run smoothly using transforms/opacity to avoid layout work, note quirks (border‑radius, text reflow), suggest testing low‑end devices, and points to the emerging View Transitions API as a native path.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 4:07Overview
- 4:47Inbetweening
- 7:31Animating Between Images
- 8:41Animating the Web
- 10:37Color Changing Cards
- 12:29Gorilla
- 12:57Richard Wiseman
- 16:42UI Transitions
- 19:54Browsers
- 26:24Flip Animation
- 27:56Reparenting
- 33:32Final Thoughts
- 35:28Flip Technique
