Gallery

Scroll Wave Image Gallery

by Vanguardia · motionprompts.dev

Vertical gallery of 12 JS-generated images that drift horizontally in a sine-wave pattern as you scroll: each image has its own ScrollTrigger whose progress drives a translateX composed of three layered sine waves (base/flow/detail) scaled to viewport width, plus a horizontal clip-path inset that opens fully when the image is centered on screen. Lenis smooth scroll is hooked into the GSAP ticker, and the last quarter of images progressively shrink in height.

Type: Web motion
Framework: GSAP
Trigger: scroll

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap+raf
Complexity: 2/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, ScrollTrigger, lenis

Scroll-position-driven, tween-free: each plate's horizontal translate is the sum of three layered sines of (normalizedIndex, scroll progress) — base amp 0.10*vw / freq 1.0 / speed 1.0 / phase 5.0 (driven by 1-progress), flow amp 0.15*vw / freq 5.0 / speed 5.0 / phase 10.0, detail amp 0.025*vw / freq 5.0 / speed 1.5 / phase 2.5 (last two offset by +0.5) — laid on a centering term (vw - offsetWidth)/2 minus 0.1*vw. Simultaneously a clip-path inset opens quadratically as the plate centers: inset = (|progress-0.5|*2)^2 * 20%, so plates arrive fully revealed at mid-viewport and pinch back to 20%/side at the extremes. No easing curve exists; the 'ease' is the sine geometry plus Lenis' default smoothing.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev22,119 chars

# Build: Scroll Wave Image Gallery

## Goal
A tall, single-column **vertical gallery of 12 images that drift left and right in a rippling sine-wave pattern as y…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.