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.
About This Effect
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.
What's Included
- 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
Perfect For
- 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
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.