Chapter 237: Flip (Overview)

Core Idea

Flip (First-Last-Invert-Play) lets you animate elements smoothly between two very different DOM/layout states — even across major structural changes — by recording their position/size/rotation before a change, then animating away the resulting visual offset after the change.

Code Examples

gsap.registerPlugin(Flip);

const state = Flip.getState(squares);
switchItUp(); // your DOM/class changes
Flip.from(state, { duration: 2, ease: "power1.inOut" });

• What it demonstrates: the three-step FLIP pattern — capture state, mutate the DOM, animate from the old state to the new one.

Key Takeaways

1. Flip handles complex layout transitions (reparenting, reordering, resizing) that would otherwise require manual position math.
2. The full plugin (this section) is much more capable than the "Simple FLIP" helper function covered earlier — reach for the plugin for anything beyond basic x/y translation.

Connects To

• Simple FLIP (Helper): the lightweight, no-plugin alternative for basic cases.
• Flip.getState(), Flip.from(), Flip.to(), Flip.fit(): the core methods covered next.