Flip · shared element

Flip shared-element gallery

This is the moment a judge stops scrolling, and the reason is not the animation — it is object permanence. A modal that fades in is a new thing; the eye has to find the image again. A Flip transition moves the thing you clicked, so attention is never dropped. The mechanism is three steps and Flip does the hard part: read the element's current geometry with Flip.getState(), mutate the DOM however you like — here it is literally one class that switches from a grid cell to position: fixed — and then Flip.from() measures the new geometry and animates the difference. You never write a single coordinate. Change the layout in the Designer six months later and the animation still works, because it was never describing positions in the first place.

Open the live demo →

How to build

Script only

Free plan gets you part of the way

The panel covers some of this. The rest needs the script, which needs a paid plan — build the panel half now, come back for the rest.

How the two routes work →

Plugins

Flip

Build time

1.5 hours. The layout is harder than the animation.

No-code?

No. Flip is not exposed in the Interactions panel at all. This is code-only, and it is the clearest reason to learn to write GSAP by hand.

Webflow structure

element · class · attribute

Div gallery_grid Collection Item gallery_tile data-flip-index="0" Div gallery_media ← THE element that travels Image Div gallery_cap Div gallery_scrim ← fixed inset 0, z 200, opacity 0 Div gallery_detail ← fixed right side, z 220, opacity 0 Heading H3 detail_title Paragraph detail_body Div detail_specs Div detail_spec ×4 Button gallery_close ← fixed, z 230, opacity 0

Styles to set in the Designer

gallery_media | Closed state: <code>position: relative; overflow: hidden; aspect-ratio: 3/4; border-radius: 2px</code>. gallery_media.is-open | Open state, as a combo class: <code>position: fixed; top: 4vh; left: 4vw; width: min(46vw, 620px); height: 92vh; aspect-ratio: auto; z-index: 210; border-radius: 4px</code>. Flip works out the rest. gallery_media.is-open (mobile) | Override to a full-width top half. Flip re-measures on every open, so a responsive open state needs no extra code. gallery_scrim | <code>position: fixed; inset: 0; z-index: 200; opacity: 0; pointer-events: none</code>. Sits under the travelling media so the image is never dimmed while it moves.

Building it with the Interactions panel

no code, free plan

What the panel still can’t do. Only custom code can close these gaps — there is no panel setting for any of them.

See “The script” below for the exact code.

Custom attributes

Element settings → Custom attributes

gallery_tile | data-flip-index | 0, 1, 2… | How the click handler knows which CMS record to write into the detail panel. In Webflow, output the item index or the slug.

CSS

Page settings → Inside <head> tag

Inside <head> tag

Copy

The script

Page settings → Before </body> tag

Before </body> tag

Copy

<script> document.addEventListener("DOMContentLoaded", () => { gsap.registerPlugin(Flip); const scrim = document.querySelector(".gallery_scrim"); const detail = document.querySelector(".gallery_detail"); const closeB = document.querySelector(".gallery_close"); let openMedia = null; function open(tile) { if (openMedia) return; const media = tile.querySelector(".gallery_media"); openMedia = media; // Fill the detail panel from the tile's own data — no second source of truth. detail.querySelector(".detail_title").textContent = tile.dataset.title; detail.querySelector(".detail_body").textContent = tile.dataset.body; // 1 · READ — geometry as it is right now. // props: "borderRadius" also interpolates non-transform CSS. const state = Flip.getState(media, { props: "borderRadius" }); // 2 · MUTATE — one class. Could equally be appendChild into another parent. media.classList.add("is-open"); // 3 · ANIMATE — Flip measures the new geometry and covers the difference. // absolute:true pulls the element out of flow for the duration, so the // grid does not reflow and shove the other tiles around mid-flight. Flip.from(state, { duration: 0.75, ease: "power3.inOut", absolute: true }); gsap.to(scrim, { opacity: 1, duration: 0.5, pointerEvents: "auto" }); gsap.fromTo([detail, closeB], { opacity: 0, y: 18 }, { opacity: 1, y: 0, duration: 0.6, delay: 0.35, ease: "expo.out", pointerEvents: "auto" }); gsap.fromTo(detail.querySelectorAll(".detail_spec"), { opacity: 0, y: 14 }, { opacity: 1, y: 0, duration: 0.5, delay: 0.5, stagger: 0.05, ease: "power3.out" }); } function close() { if (!openMedia) return; const media = openMedia; openMedia = null; gsap.to([detail, closeB], { opacity: 0, duration: 0.2, pointerEvents: "none" }); gsap.to(scrim, { opacity: 0, duration: 0.45, delay: 0.1, pointerEvents: "none" }); // Exactly the same three steps, in the same order, backwards. const state = Flip.getState(media, { props: "borderRadius" }); media.classList.remove("is-open"); Flip.from(state, { duration: 0.65, ease: "power3.inOut", absolute: true }); } document.querySelectorAll(".gallery_tile").forEach(t => t.addEventListener("click", () => open(t))); scrim.addEventListener("click", close); closeB.addEventListener("click", close); document.addEventListener("keydown", e => e.key === "Escape" && close()); }); </script>

Gotchas that will cost you an hour

getState → mutate → Flip.from. That order, always. Capture after the class change and the state is identical to the target, so Flip animates nothing and you get an instant jump with no error to explain it.
absolute: true or the grid collapses. When the tile goes fixed, the grid reflows and every other tile jumps left while your image is still travelling. absolute holds them in place for the duration.
Non-transform properties need props. borderRadius, backgroundColor, padding — Flip only tracks geometry unless you name them explicitly.
Guard against a second click. Clicking another tile while one is open leaves two fixed elements stacked. The openMedia null-check is the entire fix.
Escape must close it, and the scrim must be clickable. A fullscreen state with no obvious exit fails an accessibility audit and annoys everyone.
In Webflow, set the open state as a combo class. Then it is visible and editable in the Designer, and the person maintaining the site after you can change the layout without touching the script.

Push it further

Flip the caption too: pass both elements to getState and they travel together as a lockup rather than one moving and one fading.
Add prev/next inside the open state — the same three steps, with a fade between images while the frame stays put.
Combine with the page-transition lesson: capture the state before navigating and restore it on the destination page for a true cross-page shared element. That is the highest-difficulty move in this whole lab.

←

Image trail

→

Scroll-driven depth gallery

Webflow Motion Lab — GSAP 3.15, all plugins free.

/ 30