Skip to content
motionprompts motionprompts

Vucko Scroll Animation

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

Open live demo ↗ Download source

What it does

A tiny centered video preview grows from a 0.25 thumbnail to full scale as the intro section scrolls into view, driven by a GSAP ScrollTrigger scrub timeline (start top bottom, end top 10%) whose onUpdate interpolates translateY, scale, gap and a two-phase title font-size. A requestAnimationFrame loop applies the transforms and adds an eased mouse-follow horizontal parallax, all under Lenis smooth scroll.

How it's built

Categoryscroll
Techgsap, lenis
GSAP pluginsScrollTrigger
Complexitypage
Performance costlight
Mobile-safedesktop-first
Scrollhijacks scrolling

scroll scrub video-reveal scale mouse-parallax lenis showreel editorial minimal

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.

# Scroll-Grow Showreel Video Reveal (Scrub + Mouse Parallax)
## Goal
Build a minimal editorial landing page where a **tiny video-preview thumbnail (scaled to 0.25, pulled up above its section) grows into a full-width 16:9 showreel as the intro section scrolls into view**. A GSAP ScrollTrigger scrub timeline drives nothing directly — its `onUpdate` only interpolates values into a shared state object (`translateY`, `scale`, column `gap`, and a **two-phase title font-size**), and a `requestAnimationFrame` loop applies them as a transform string, adding an **eased mouse-follow horizontal parallax** that fades out as the video reaches full scale. Scroll is smoothed with Lenis. Desktop-only effect.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use **`gsap` (npm)** with the **`ScrollTrigger`** plugin, plus **`lenis`**:
```js
import Lenis from "lenis";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
```
Everything runs inside a `DOMContentLoaded` listener, and the **entire script body is wrapped in `if (window.innerWidth >= 900) { ... }`** — below 900px no Lenis, no ScrollTrigger, no rAF loop at all. Wire Lenis the standard way:
…

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.