Telescope Image Scroll Animation
What it does
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.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger, SplitText |
| Complexity | page |
| Performance cost | medium |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
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.
# 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 six stacked copies of the same photo — each clipped by a silhouette-shaped CSS mask — grow at staggered scales, producing a lens-within-a-lens telescoping depth effect. Two large intro words slide apart horizontally and a centered headline fades in word-by-word near the end of the scrub.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm), plus the GSAP plugins `ScrollTrigger` and `SplitText`, and `lenis` for smooth scrolling. No frameworks, no build-specific code — plain `import` statements at the top of `script.js`.
## Layout / HTML
Three full-viewport sections in `<body>`:
1. `<section class="hero">` — a centered `<h1>` with the text "The frame is only the beginning."
2. `<section class="banner">` — the animated section. Inside:
- `<div class="banner-img-container">` containing, in this order:
- **7 image layers**, each `<div class="img"><img src="..." alt="" /></div>`. All 7 use the **same photo**. The **first** layer has only class `img` (the unmasked base). The remaining **6** have class `img mask` (silhouette-masked copies).
- `<div class="banner-header"><h1>The Season Wears Confidence</h1></div>` — the headline that reveals word-by-word.
…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.