Gallery

3D Circular Image Gallery

by Vanguardia · motionprompts.dev

32 full-colour film-still tiles (18 on phones) are placed around a circle with CSS 3D transforms to form a tilted ring seen in perspective. On load the tiles are dealt out from a single stacked point to their places around the ring with a staggered GSAP tween. GSAP ScrollTrigger (scrub) spins the ring on scroll and a pointer drag spins it directly with inertia; a mousemove listener parallax-tilts the gallery toward the cursor, and hovering a tile pushes it outward and swaps the large centred preview still, which is mounted with no border or outline of any kind.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.25–1s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power2
Complexity: 2/5
Pinned: no
Reduced motion: handled
Libraries: gsap, ScrollTrigger

scroll-scrubbed tilted 3D CSS ring, cursor parallax

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev32,998 chars

# 3D Circular Image Gallery

## Goal
Build a full-screen 3D scene where **32 small image tiles (18 on phones) are arranged around a circle using CSS 3D transfor…

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.