Scroll effect

Telescope Scroll Animation

by Vanguardia · motionprompts.dev

'Afterimage', a pinned spotlight gallery of long-exposure photographs in colored light. Scrolling first splits the 'After / Image' intro text apart and scales a background image up from zero, then scrolls a vertical column of frame titles through a diamond-shaped (telescope) clip-path viewfinder while thumbnails fly along a quadratic bezier arc; the title nearest the viewport center highlights and swaps the full-bleed background image. Driven by a single ScrollTrigger (pin + scrub over 10x viewport height, Lenis-smoothed) whose onUpdate maps scroll progress across phased ranges with gsap.set.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.3–0.3s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

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

pinned scrub gallery, titles column plus bezier-arc thumbnails

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev22,163 chars

# Telescope Scroll Animation

## Goal
Build a pinned, scroll-driven "spotlight" gallery section. As the user scrolls, two intro words ("Beneath" / "Beyond") spl…

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.