FLIP Layout Morph
Smooth layout animations using GSAP Flip. Grid-to-detail morph, gallery lightbox morph, and filter-and-rearrange with enter/exit animations.
About This Effect
A layout animation system powered by GSAP's Flip plugin. Captures element state before a DOM change, then animates smoothly from old position to new. Demo 1 morphs a grid card into a full detail panel with a shared-element transition. Demo 2 morphs gallery thumbnails into a centered lightbox overlay. Demo 3 filters and rearranges a grid of categorized items with staggered enter/exit animations.
What's Included
- Grid-to-detail shared element morph transition
- Gallery lightbox morph with backdrop blur overlay
- Smooth position, size, and border-radius interpolation via Flip
- Detail panel with sequenced fade-in content after morph completes
- Category filter with animated rearrange and enter/exit
- Staggered Flip transitions for organic multi-element motion
- Configurable duration, easing, and stagger via data attributes
- Keyboard accessible with Enter, Space, and Escape controls
- Reduced motion fallback with instant show/hide
Perfect For
- Portfolio and case study grids with detail expansion
- Image galleries with lightbox-style preview
- Product catalogs with quick-view detail panels
- Filterable project galleries on agency sites
- Category-based content grids with smooth rearrangement
- Any layout where elements need to animate between positions
How It Works
The Flip plugin works in three steps: capture the current state with Flip.getState(), make the DOM change (reparent, toggle display, reorder), then call Flip.from() to animate from the old state to the new layout. Demo 1 reparents a grid card into a detail container, creating a shared-element transition where the card image smoothly scales and repositions. Demo 2 reparents a gallery thumbnail into a fixed lightbox overlay, morphing it from a small grid tile to a centered hero image. Demo 3 toggles display:none on non-matching filter items and lets Flip animate the remaining items into their new grid positions, with onEnter/onLeave callbacks handling scale and fade for entering and exiting elements.