A step-by-step guide to recreating Telescope's cinematic layered zoom scroll animation using GSAP's ScrollSmoother and ScrollTrigger plugins. The tutorial breaks down the effect into three parts: building a floating image grid with Z-axis animations, creating split text that reveals a masked central image, and implementing a trailing zoom effect with multiple scaled and blurred image layers. Demonstrates techniques like animating CSS variables for synchronized motion, using CSS masks for depth illusion, and combining scale and blur animations to create smooth, immersive scroll-based interactions.
Table of contents
Floating image gridMain visual and split textLayered zoom and depth effectFinal thoughtsSort: