# FLIP Layout Morph > Shared-element layout transitions powered by GSAP Flip, with a premium grid-to-detail archive showcase plus reusable lightbox and filter APIs. Canonical: https://gsapvault.com/effects/flip-layout-morph Live demo: https://gsapvault.com/demos/flip-layout-morph/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Flip | | Techniques | flip-layout, shared-element, lightbox, filter, stagger | | Uses Lenis | No | ## Overview A polished shared-element layout effect powered by GSAP's Flip plugin. The focused showcase turns an editorial project tile into a dominant dossier while the surrounding archive compresses into a quiet project rail, then returns the tile precisely to its original slot. Reusable lightbox and filter-and-rearrange APIs remain included for production builds. ## Features - Grid-to-detail shared-element morph from the tile's exact geometry - Synchronized surrounding-grid reflow and opacity response - Layered project metadata and display typography reveal - Smooth position, scale, and border-radius interpolation with Flip - Precise reverse transition back to the original grid slot - Reusable modal lightbox morph API with focus restoration - Reusable category filter API with staggered enter and exit states - Configurable duration, easing, and stagger through data attributes - Keyboard, Escape, focus-trap, and reduced-motion support ## Use Cases - Editorial portfolios with immersive project dossiers - Agency case-study grids with shared-element continuity - Product catalogs with focused quick-view compositions - Image galleries with accessible modal previews - Filterable archives with animated layout changes ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works The Flip plugin captures every card's current state with Flip.getState(), then the selected card is reparented into the detail composition while the archive switches to its compact layout. Flip.from() interpolates the selected colour field and all surrounding card geometry, while a GSAP timeline layers in metadata and typography with restrained power easing. On close, the current composition is captured before the card is returned to its matching data-flip-slot and the archive layout is restored, producing a precise no-jump reverse. Reduced-motion users receive the same DOM and focus state changes instantly. The included lightbox and filter initializers use the same capture-change-animate pattern and share context-based cleanup. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add before the closing `` tag:** ```html ``` **3. Add to your ``:** ```html

``` The `.flip-detail-media` wrapper and `data-detail-*` content hooks are optional. Without them, the card is appended directly to `.flip-detail`, preserving the minimal API. ### Options | Attribute | Element | Default | Description | |---|---|---:|---| | `data-flip-morph` | Container | — | Initializes grid-to-detail behavior | | `data-flip-lightbox` | Container | — | Initializes thumbnail-to-lightbox behavior | | `data-flip-filter` | Container | — | Initializes filter and rearrange behavior | | `data-flip-duration` | Container | `0.7` morph/filter, `0.6` lightbox | Transition duration in seconds | | `data-flip-ease` | Container | `power3.inOut` morph/lightbox | GSAP ease used for FLIP geometry | | `data-flip-stagger` | Filter container | `0.04` | Delay between rearranging items | | `data-flip-id` | Morph card | — | Unique identifier for return placement | | `data-flip-slot` | Grid slot | — | Identifier matching `data-flip-id` | | `data-detail-title` | Morph card | — | Optional detail title copied into `[data-detail-title]` | | `data-detail-kicker` | Morph card | — | Optional detail metadata copied into `[data-detail-kicker]` | | `data-detail-description` | Morph card | — | Optional copy inserted into `[data-detail-description]` | | `data-detail-index` | Morph card | — | Optional index copied into `[data-detail-index]` | | `data-caption` / `data-meta` | Lightbox thumb | — | Caption content for the modal lightbox | | `data-filter` | Filter button | — | Category to show; use `all` for every item | | `data-flip-category` | Filter item | — | Category matched by a filter button | ### Accessibility - Use native `