Flip
Flip is a GSAP plugin that animates a layout change by recording an element's position and size, letting the DOM change, then tweening from the old state to the new one with transforms. It runs the FLIP technique (First, Last, Invert, Play), so a reflow that would normally jump from one place to another reads as a smooth move even though the browser only ever paints transforms.
Updated June 30, 2026
How Flip works
The FLIP acronym is the whole method: First (record where the element is now), Last (make the DOM change, so the element snaps to its new spot), Invert (apply a transform that visually puts it back where it was), and Play (tween that transform away to zero). Because the browser only animates transform, never width / height / top / left, the move stays on the GPU-composited path instead of triggering layout on every frame. Paul Lewis named the technique in 2015 (aerotwist.com/blog/flip-your-animations); GSAP's Flip plugin automates the bookkeeping.
The two-snapshot flow is Flip.getState() then Flip.from(). You capture state before the change and hand it back after.
When the layout change reflows siblings, set absolute: true so the flipping elements go position: absolute for the duration of the tween. Without it, the elements you are not animating jump to their final positions instantly while the animated ones glide, which looks broken. Use nested: true when flipping a container whose children also move, and scale: true to animate size with scaleX / scaleY instead of width / height.
Flip.fit() is the one-call variant: it fits one element onto another element's (or a recorded state's) position and size without the getState / from pair. It is the right tool when you are continuously matching a moving target, like fitting a media element into a different zone container as the user scrolls.
Why this matters for performance
Use Flip for
- Grid filtering and reordering where tiles animate to their new slots
- Expanding a card into a detail / lightbox view (the card grows in place instead of cross-fading)
- Moving an element to a completely different parent in the DOM and animating the jump
- Shared-element transitions between two layout states or routes
- Scroll-driven
Flip.fitwhere one element morphs to fit a sequence of zones
Use something else when
- The element doesn't reflow, you are just moving it visually, then a plain
gsap.to({ x, y, scale })is simpler and needs no plugin - You want a native, GSAP-free path and can accept the browser support floor, then the CSS View Transitions API covers a lot of the same ground
- It's a pure entrance with no 'before' layout to record, then a normal tween from offset values is enough
- You only need an icon or shape to morph its path, that's MorphSVG, not a layout flip
- The 'flip' you mean is a 3D card rotation on
rotationY, not a layout change, then it's a transform tween and Flip has nothing to do with it
Used in these Annnimate components
Both scroll components below register Flip and drive it with Flip.fit so an element is continuously refit to a target as you scroll:
- Multi Flip records a stacked pile of cards with random rotations, then uses Flip to scatter them into their final grid zones as the section scrolls into view
- Flip Zone fits a single media element from one zone container to the next, morphing position, size, and rotation on scroll for a storytelling sequence
Name collision
rotationY from cursor position, which is a straight transform tween, not the FLIP layout technique. It is here as a related component because of the shared name, not because it uses the Flip plugin.See it running in production
Multi FlipA stack of cards that fans out from a messy pile into a neat grid as you scroll, each one starting overlapped at a random angle.
Flip ZoneA photo or video that moves and resizes from one spot to the next as you scroll, sliding smoothly into each new frame.
3D Card FlipA card that tilts and turns in 3D as you move your cursor over it, so it looks like it has real depth.Common questions
- What is the FLIP technique in animation?
- FLIP stands for First, Last, Invert, Play. You record an element's First position, let the layout change to its Last position, Invert that change with a transform so it looks like nothing moved, then Play the transform back to zero. The point is to animate cheap GPU transforms instead of layout properties like width, height, top, or left, which jank. GSAP's Flip plugin does the recording and inverting for you.
- When should I use Flip.getState/Flip.from vs Flip.fit?
- Use getState then from when you have a discrete before-and-after: record state, change the DOM, animate from the recorded state. Use Flip.fit when you are continuously matching a moving or scrubbed target, like fitting an element into a zone that changes on scroll. fit is a single call with no snapshot to manage, which is why both the Multi Flip and Flip Zone components use it.
- Why do other elements jump when I run a Flip animation?
- Because the layout change reflowed the siblings, and by default only the flipping elements are animated while everyone else snaps to their final spot. Pass
absolute: trueto Flip.from so the animated elements go position: absolute during the tween and the surrounding layout stays put. If the flip is nested inside a moving container, also setnested: true. - Is the GSAP Flip plugin free to use?
- Yes. Flip was a Club GreenSock plugin in the past, but since GSAP 3.13 (mid 2024, after Webflow took over GreenSock) the entire toolset including Flip is free for commercial use. There is no license to buy and nothing to gate behind a paid tier.
- Can I animate a layout change with just CSS instead of Flip?
- Sometimes. The native View Transitions API handles a lot of the same before-and-after layout cases without GSAP, though browser support is still uneven. Flip gives you finer control over duration, easing, staggering, and per-element callbacks (onEnter / onLeave for items added or removed between states), and it works the same across every browser GSAP supports.
