Sticky Image Minimap
What it does
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.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap |
| GSAP plugins | ScrollTrigger |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# 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 scroll past, paired with a **sticky vertical minimap** of small thumbnails pinned to the left that stays centered on screen the whole time. The star effect: as each full-size image passes through the vertical center of the viewport, its matching thumbnail in the minimap **lights up** — it pops to `scale 1.3`, goes fully opaque, gains a white border and jumps above its neighbors — then softly reverts once the image leaves the center band. The result reads like a live "you are here" indicator tracking your scroll position through the gallery. Driven by one GSAP `ScrollTrigger` per image using its `onToggle` callback (no scrubbing).
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the single GSAP plugin **`ScrollTrigger`**. No smooth-scroll library, no canvas/WebGL. Import and register as:
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
```
Run everything inside a `DOMContentLoaded` handler.
## Layout / HTML
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.