Gallery

Infinite Draggable Image Gallery

by Vanguardia · motionprompts.dev

An endless, draggable grid of thumbnails that recycles DOM items as you pan (custom lerp animation loop with velocity-based momentum on release). Clicking a thumbnail hides it, dims the rest, and expands a clone to a large frame via a GSAP fromTo tween on a CustomEase 'hop', while a SplitType word-by-word project title staggers up; clicking the overlay reverses the animation.

Type: Web motion
Framework: GSAP
Trigger: drag
Duration: 0.3–1s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap+raf
Easing: power2
Complexity: 3/5
Pinned: no
Reduced motion: handled
Libraries: gsap, CustomEase, SplitType

rAF lerp (0.075) infinite drag canvas with release momentum (velocity * 200), click-to-expand

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev28,263 chars

# Infinite Draggable Image Gallery

## Goal
Build a full-viewport, **infinitely draggable image gallery**: an endless grid of small portrait thumbnails on a pal…

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.