Interactive scrolling effects have become a must-have in modern web design. One of the most popular techniques is the pinned image mask reveal on scroll. With GSAP (GreenSock Animation Platform) and ScrollTrigger, you can create smooth, eye-catching animations that keep users engaged as they explore your page.
In this guide, we’ll walk through building a pinned image mask reveal section with GSAP, ScrollTrigger, and Lenis smooth scrolling.
🔥 What is an Image Mask Reveal on Scroll?
An image mask reveal is a scrolling animation where images are gradually unveiled or transitioned using clip paths, object positioning, and pinning techniques. Instead of static images, the design feels alive and interactive, perfect for storytelling websites, portfolios, and creative landing pages.
With GSAP ScrollTrigger, we can pin an image container while changing the clipPath, z-index, and background color to create seamless transitions between sections.
✨ Features of This GSAP Effect
- ✅ Smooth scroll powered by Lenis
- ✅ Pinned image section with ScrollTrigger
- ✅ Dynamic clip-path mask animations
- ✅ Responsive design with mobile and desktop variations
- ✅ Background color transitions for immersive storytelling
See the Pen GSAP pinned image mask reveal on scroll by grid morphic (@gridmorphic) on CodePen.
Post a Comment