014
AI ready

FLIP Layout Morph

£5

Shared-element layout transitions with GSAP Flip: a grid tile travels into a detail view while its neighbours reflow into a strip, swaps with any of them in one crossing move, and returns to its exact slot.

Flip intermediate
5 more details
flip-layoutshared-elementlightboxfilterstagger
FLIP Layout Morph - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open FLIP Layout Morph demo in new tab

About this effect

A shared-element layout effect powered by GSAP's Flip plugin. Click a project in the archive and its photograph travels into a feature frame while the other five compress into a strip along the floor, all in one captured motion; pick another from the strip and the two pictures cross, the featured one going home as the new one takes the frame. Close, and everything returns to its original cell with no jump.

Read the full effect overview

The open state is a CSS layout change rather than a set of scripted positions, so a buyer can restyle what the neighbours do and Flip animates whatever results. Reusable lightbox and filter-and-rearrange APIs are included for production builds.

What's included

9 items
  • Grid-to-detail shared-element morph from the tile's exact geometry
  • Neighbouring tiles reflow into a strip in the same captured motion, with a small stagger
  • Swap: click any strip tile, or Previous / Next, and the two photographs cross in one move
  • Photographs re-crop in flight rather than stretching (Flip with scale off)
  • Precise reverse transition back to the original grid slot, with the vacated slot shown
  • Detail copy, index and facts filled from data attributes and revealed after the geometry settles
  • Reusable modal lightbox morph API with focus restoration
  • Reusable category filter API with staggered enter and exit states
  • Keyboard: Escape, arrow keys, focus trap across dialog and strip, plus reduced-motion support

Perfect for

5 use cases
  • Studio and agency project archives with immersive case-study views
  • Editorial portfolios where the photograph carries from grid to feature
  • Product catalogues with focused quick-view compositions
  • Image galleries with accessible modal previews
  • Filterable archives with animated layout changes

How it works

2 sections

The Flip plugin captures every card's geometry with Flip.getState(), then the selected card is reparented into the detail's media well while the container gains an open class that turns the grid into a strip. Flip.from() interpolates the selected photograph and every neighbour from where they were to where the new layout puts them, with absolute positioning so the in-between frames never fight the layout, and a GSAP timeline lifts the copy in once the geometry has settled.

Swapping captures the same state, sends the featured card back to its slot and the chosen one into the well, and runs one Flip.from() so both travel at once. On close the composition is captured again, the card is appended to its matching data-flip-slot, and the open class is removed, giving a precise no-jump reverse. While anything is in flight the container carries an is-moving class that lifts overflow clipping, so a picture arriving from outside the frame is visible for the whole trip. Reduced-motion users receive the same DOM and focus changes instantly.

Plugins Flip
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying FLIP Layout Morph opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add to your <body>:

Code snippet omitted: it ships with the download.

Every data-detail-* target, the facts list and the Previous / Next buttons are optional. Leave any of them out and the script skips them. Without a .flip-detail-media wrapper the card is appended straight into .flip-detail.

Using It With Your Own Design

What the script needs from your markup. A [data-flip-morph] container holding a .flip-grid of .flip-grid-slot wrappers, one .flip-card per slot, and a .flip-detail dialog. Each card's data-flip-id must match its slot's data-flip-slot: that pairing is how the card finds its way home, so a card can live anywhere in the detail while open and still return to the right cell. Cards should be <button>s (or links); the script also accepts other focusable elements and adds Enter and Space for them.

What is the demo's and can go. The photographs, the caption row (.flip-card-info), the studio archive head row, the fixed-height showcase shell and the 4x2 / 2x3 grid columns are all demo styling. Replace the grid with your own layout, drop your own content inside each card and keep the class names the script queries.

The open state is a CSS layout, not a script one. Opening adds is-open to the container and is-active to the dialog, and the stylesheet decides what those mean: in the demo the grid shrinks into a 64px strip along the floor and the dialog takes the room above it. Change those rules to make the neighbours do anything else (fade, stack down one side, disappear) and Flip animates whatever geometry results, because it captures every card before the class change and interpolates to the layout after it. That is the whole mechanism; there are no per-card positions in the script.

Non-obvious CSS the effect depends on.

  • .flip-card is overflow: hidden with the image at object-fit: cover, and Flip runs with scale: false, so the photograph re-crops during flight rather than stretching. Turn scale on in script.js for a cheaper transform-only move if your cards hold text rather than images.
  • .archive.is-moving lifts overflow: hidden from the dialog and its media well for the duration of a move. Keep an equivalent rule if you restyle: without it a picture arriving from outside the frame is clipped until it lands.
  • .flip-detail is display: none at rest and display: grid under .is-active. Hidden copy inside it is animated with fromTo, so nothing needs a pre-hidden start state and the page is complete without JavaScript.
  • The empty slot a card left behind is styled with .flip-grid-slot:empty, so the visitor can see where it will return to. Delete that rule if you would rather the gap closed.
  • Set --accent for the kicker, the focus ring and ::selection; every other colour is one ink at different alphas on a grey ground, so the interface stays out of the photographs' way.

Photographs. The demo images are bundled, optimised WebP derivatives baked from Pexels originals (licence permits modification and redistribution; credits below). Swap them by replacing the files in assets/img/ or by pointing each card's <img> at your own.

Options

Attribute Element Default Description
data-flip-morph Container — Initializes grid-to-detail behaviour
data-flip-duration Container 0.8 morph, 0.7 filter, 0.6 lightbox Transition duration in seconds
data-flip-ease Container power3.inOut morph and lightbox, power2.inOut filter GSAP ease used for the Flip geometry
data-flip-stagger Container 0.03 morph, 0.04 filter Delay between neighbouring cards setting off
data-flip-swap Morph container true Set false to make the neighbours inert while the detail is open, instead of swapping into the frame when clicked
data-flip-id Morph card — Identifier matched to a slot for the return trip
data-flip-slot Grid slot — Identifier matching data-flip-id
data-detail-title Morph card — Copied into [data-detail-title]
data-detail-kicker Morph card — Copied into [data-detail-kicker]
data-detail-description Morph card — Copied into [data-detail-description]
data-detail-index Morph card — Copied into [data-detail-index]
data-detail-year Morph card — Copied into [data-detail-year]
data-detail-scope Morph card — Copied into [data-detail-scope]
data-detail-reveal Detail copy — Elements that rise in after the geometry settles, and drop out before a swap or close
data-flip-prev / data-flip-next Detail buttons — Step to the previous or next card in grid order; disabled at the ends
data-flip-lightbox Container — Initializes thumbnail-to-lightbox behaviour
data-caption / data-meta Lightbox thumb — Caption content for the modal lightbox
data-flip-filter Container — Initializes filter-and-rearrange behaviour
data-filter Filter button — Category to show; all for every item
data-flip-category Filter item — Category matched by a filter button

Keyboard: Escape closes, Left and Right arrows step between projects while the detail is open, and Tab cycles the dialog and the strip together.

Additional APIs

Lightbox

Code snippet omitted: it ships with the download.

Filter and rearrange

Code snippet omitted: it ships with the download.

Customization

Set timing per instance rather than editing the animation source:

Code snippet omitted: it ships with the download.

Make the neighbours inert while a project is open (no strip swapping):

Code snippet omitted: it ships with the download.

Accessibility

  • Cards, close, Previous and Next are native <button>s. Focus moves to the close control when a project opens and returns to the card that was open when it closes.
  • While open, the featured card leaves the tab order (it is the picture, not a control) and the strip cards stay in it, because they are the way to the next project. With data-flip-swap="false" they are hidden from assistive technology instead.
  • Tab is trapped inside the component (dialog plus strip); Escape closes; arrow keys step.
  • prefers-reduced-motion: reduce swaps states instantly with the same content and focus behaviour.
  • Keep descriptive aria-label, aria-haspopup, aria-expanded and dialog labels in your markup; the script maintains aria-expanded and aria-hidden.

Photo Credits

Bundled derivatives baked from assets/img-manifest.json with bun scripts/build-template-assets.ts flip-layout-morph. Originals on Pexels, licence permits modification and redistribution:

Browser Support

Modern browsers with ES6 support.

Dependencies

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Related articles

September 2026: site refresh and new GSAP demos

GSAP Vault has a quieter design, around two dozen effect demos rebuilt on a neutral ground, a new Scroll Story Flow effect, and a redesigned free parallax hero.

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.