Scroll effect

Telescope Image Scroll Animation

by Vanguardia · motionprompts.dev

A pinned banner scrubbed over four viewport heights with Lenis smooth scroll: the image container scales up from zero while seven stacked silhouette-masked copies of the same photo grow at staggered scales, creating a telescoping lens-in-lens depth effect. Two intro words slide apart horizontally and the centered headline reveals word-by-word, all driven by a single ScrollTrigger onUpdate reading self.progress.

Type: Web motion
Framework: GSAP
Trigger: scroll

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Complexity: 4/5
Pinned: yes
Reduced motion: not handled
Libraries: gsap, ScrollTrigger, SplitText, lenis

pinned 400vh scrub where a single onUpdate maps scroll progress linearly onto transforms: container scale 0→1, six silhouette-masked copies each lerping from initialScale 0.9−i*0.2 (layer 6 starts at −0.1, flipped) toward 1 over progress/0.9 — a telescoping lens-in-lens zoom; two intro words counter-slide horizontally ±progress*50vw; headline words fade in one by one across progress 0.7→0.9. No tweens, no eases: all smoothing comes from scrub:1 plus Lenis inertia

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev18,402 chars

# Telescope Image Scroll Animation

## Goal

Build a scroll-driven "telescope" hero: a pinned full-screen banner where an image container scales up from 0 while…

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.