Flip zone or Flip filter?

Filter is a click that rearranges many tiles. Zone is a scroll that moves one object through slots.

Flip zone or parallax?

Parallax is different speeds on stacked layers. Zone is one object changing jobs.

2 or 3 is a scene. 5 is a tour.

What happens on a tall phone?

The zones stack, and the fit has further to travel.

Flip zone

A flip zone takes one element, usually an image or a short clip, and fits it into a sequence of frames as the page scrolls, so the same object changes slot, size and crop instead of a new picture arriving each time.

ScrollBuild difficulty: MediumFlip

Also called Scroll flip, Fit to frame, Zone morph, Media flip, Shared-element scroll.

Here it is working.

Click Move. The tile travels to the other box.

For designers

This is a storytelling trick for a short sequence: a product in 3 setups, a still that grows into a hero then settles into a captioned well. One actor, several stages. The frames have to be designed as resting states, because reduced motion will jump from one to the next, and that jump still has to make sense.

Use this when

One object is the thread through a few sections, and you want it to keep its identity as it moves.
Each zone is a real layout slot with a size that already works when still.
You can pin or scrub a short stretch, not the whole page.
Reduced motion can jump the object from zone to zone, or show each zone own still.

Reach for something else when

You only wanted stacked speeds. Use Parallax.
You wanted a grid to rearrange on a category click. Use Flip filter.
You wanted a wipe or a crop. Use Mask reveal.
Named steps with labels should hold the screen. Use Step-by-step timeline.
Each section has its own picture and they do not need to be the same object. Use Element reveal.

How to build it

Lay out the zones in the page as empty slots. One moving element is the actor. On scroll, fit that element to the current zone. Flip.fit is the one-call route. Drive the fits from ScrollTrigger, scrubbed. Pin only as much as the sequence needs. 2 or 3 zones is a scene. 4 is already a long hold. Keep a still image in each zone for anyone who never runs the script. On reduced motion, put the right still in the right zone and leave it.

Official GSAP

Flip.

const state = Flip.getState(tile);
otherZone.append(tile);
Flip.from(state, { duration: 0.5, ease: 'power2.inOut', absolute: true });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Flip zone or Flip filter?: Filter is a click that rearranges many tiles. Zone is a scroll that moves one object through slots.
Flip zone or parallax?: Parallax is different speeds on stacked layers. Zone is one object changing jobs.
How many zones?: 2 or 3 is a scene. 5 is a tour.
What happens on a tall phone?: The zones stack, and the fit has further to travel.
What does reduced motion do?: Each zone shows its own still.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Flip filter