Scroll effect

Sticky Image Minimap

by Vanguardia · motionprompts.dev

A tall scrolling column of full-size images paired with a sticky vertical minimap of thumbnails; a GSAP ScrollTrigger created per image fires onToggle as each image passes the viewport center (start 'top center', end 'bottom center'), and gsap.to animates the matching thumbnail's border, opacity, scale (1.3) and z-index to highlight it. Triggered by scroll.

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

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

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

per-image ScrollTrigger toggles sticky thumbnail highlight — discrete boolean state change at viewport center, 0.3s power1.out tween of opacity 0.5↔1, scale 1↔1.3, zIndex 1↔10000; no scrub, no continuous scroll mapping, no inertia

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev20,350 chars

# Sticky Image Minimap — Scroll-Synced Thumbnail Highlight

## Goal
Build a tall, dark editorial travel gallery: a wide column of big full-size images that you…

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.