Nine layout states
Each a real CSS layout; Flip handles the interpolation between them.
Scroll Effect Templates · v1.0.0
Drift
A gallery that morphs between nine layout arrangements.
Rated 4.8 out of 5 based on 55 reviews.840 sold9 variationsUpdated September 20, 2026
01 / 04Click to enlarge
GSAP FlipGalleryScrollLayout
Overview
Drift runs a single set of images through nine different layouts as you scroll, using GSAP Flip so the images travel between arrangements rather than cutting. A stacked column becomes a scattered field becomes a tight grid.
Because it is Flip-based, the same image is genuinely the same element throughout - the continuity is real, which is what makes it feel expensive rather than like a slideshow.
Best for: Image-led sites that want one continuous gallery rather than separate sections.
What makes it different
True element continuity
No cross-fade between duplicate nodes - one element, many positions.
Seventy sample images
Enough to evaluate the pacing before you commit your own assets.
No build step
Static files with GSAP vendored locally.
In the box
- 1 continuous gallery with 9 layout states
- GSAP 3.15 + Flip + ScrollTrigger + Lenis, vendored
- Self-hosted Inter
- 70 sample images
Built with
- GSAP 3.15
- Flip
- ScrollTrigger
- Lenis
Questions about Drift
Can I change the layouts?
Yes - each state is plain CSS on a wrapper class. Flip measures whatever you define.
What happens on a small screen?
The layouts collapse to a single column and Flip still animates between them; the effect is quieter but intact.
Still unsure? Email us - or read how to choose a template.
Related
You might also consider
61% offMonolith
$38$15
One element carries an entire scrolling story.
ScrollRated 4.9 out of 5 from 58 reviews.
55% offPrism
$31$14
SVG turbulence that warps imagery as it enters the viewport.
ScrollRated 4.6 out of 5 from 38 reviews.
45% offFormation
$38$21
Image grids that assemble into twenty different arrangements.
ScrollRated 4.8 out of 5 from 47 reviews.