Hypnotic Image Gallery (GSAP Flip)
What it does
A 14-image still-life gallery for a set-design studio (Plinth) that morphs between three layouts — Grid, Index, Stack — when you click the nav items; GSAP Flip records the DOM state, swaps a layout class, and animates every image from its old to new position with a custom hop ease and staggered timing. The Index layout becomes a Lenis-smoothed vertical scroll list with a floating minimap and preview column driven by a scroll handler.
How it's built
| Category | gallery |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | Flip, CustomEase, ScrollToPlugin |
| Complexity | page |
| Performance cost | medium |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Hypnotic Image Gallery — GSAP Flip Layout Morph (3 layouts) + Lenis Scroll List
## Goal
Build a full-viewport image gallery of **14 tiles** that **morphs between three completely different layouts** when you click the numbered nav items (`01` / `02` / `03`). The star effect is **GSAP Flip**: on every switch it records the on-screen state of all 14 tiles, swaps a single layout class on the gallery, then animates every tile smoothly from its old position/size to its new one with a custom **"hop"** ease and a tiny per-tile stagger. Layout `01` is a scattered editorial grid, layout `02` is a small vertical column that becomes a **Lenis-smoothed vertical scroll list** (a framed "minimap" box and a hidden full-size preview column fade in and drift as you scroll), and layout `03` piles all 14 tiles into a single stacked deck in the top-right corner.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugins **`Flip`**, **`CustomEase`**, and **`ScrollToPlugin`**, and **`lenis`** for smooth scroll. Imports:
```js
import gsap from "gsap";
import { Flip } from "gsap/Flip";
import { CustomEase } from "gsap/CustomEase";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import Lenis from "lenis";
gsap.registerPlugin(Flip, CustomEase, ScrollToPlugin);
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.