Skip to content
motionprompts motionprompts

Inkfish Inspired Horizontal Scroll

GSAP animation component · Published 2026-07-27 · by vanguardia.dev

Open live demo ↗ Download source

What it does

A full-screen editorial gallery where a 500vw horizontal track of text and image sections is panned by a draggable timeline scroller pinned to the bottom. GSAP Draggable (type x, bounded) drives the interaction: onDrag converts the scroller's position to a 0-1 progress and gsap.to tweens the track's x (duration 1, ease power3.out) for smooth momentum-style horizontal scrolling, over a bottom ruler of 50 generated tick markers.

How it's built

Categorygallery
Techgsap
GSAP pluginsDraggable
Complexitypage
Performance costlight
Mobile-safeyes

horizontal-scroll draggable gsap gallery timeline editorial fashion dark

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.

# Draggable Timeline Horizontal Scroll — 500vw Editorial Track Panned by a Bottom Scrubber
## Goal
Build a **full-screen, black editorial fashion gallery** whose content lives on one enormous **500vw horizontal track** (five side-by-side full-viewport sections that alternate text and image spreads). The page itself never scrolls. Instead a **draggable "timeline" scrubber pinned to the bottom** of the screen — sitting over a ruler of thin vertical tick-marks — is dragged left/right, and that drag **pans the whole track horizontally**. The star effect: as you drag the scrubber, its position is normalized to a 0→1 progress that maps onto a **0 → −400vw** pan, and the track **eases to that target with a trailing, momentum-style `power3.out` tween** (each drag frame re-fires a 1s tween, so the track glides and lags smoothly behind your hand rather than snapping). Built with GSAP **Draggable**.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the single GSAP plugin **`Draggable`**. No ScrollTrigger, no smooth-scroll library, no canvas/WebGL. Import as:
```js
import gsap from "gsap";
import { Draggable } from "gsap/Draggable";   // or "gsap/all"
gsap.registerPlugin(Draggable);
```
## 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.