Learn how to recreate Telescope’s smooth, layered zoom scroll animation using GSAP’s ScrollSmoother and ScrollTrigger plugins to achieve a cinematic, depth-filled scrolling experience.

Codrops stands at the forefront of innovation in web design, serving as a boundless source of inspiration and knowledge for designers and developers alike. Through a captivating array of tutorials, demos, and showcases, Codrops invites creatives to embark on a journey of exploration, pushing the boundaries of what's possible in web development. From  CSS techniques and JavaScript animations to immersive user interfaces and experiential storytelling, Codrops empowers designers and developers to unleash their creativity and craft unparalleled digital experiences that captivate and engage audiences.

Codrops

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.

Building a Layered Zoom Scroll Effect with GSAP ScrollSmoother and ScrollTrigger