How to Create a Layered Zoom Scroll Effect Using GSAP

Creating engaging web interactions is crucial for capturing user attention. In this tutorial, we’ll explore how to build a striking layered zoom scroll effect using GSAP’s ScrollSmoother and ScrollTrigger plugins.

Overview of the Tutorial

In our previous tutorial, we recreated a grid experience inspired by the Palmer website. Today, we’re embarking on another journey by rebuilding a smooth scrolling animation from the Telescope website, originally designed by notable creators like Louis Paquet and Kim Levan. Our goal is to dissect the underlying mechanics and recreate the animation from scratch.

What You Will Learn

This tutorial will guide you through creating a dynamic image grid, a smooth zoom effect on a masked image, and split text that moves apart—all while implementing smooth scrolling. By the end, you’ll have hands-on experience with GSAP’s essential animation plugins.

Step 1: Setting Up the Floating Image Grid

The Markup

Begin with a straightforward layout. We’ll keep things simple and predictable by adding a series of images to form the base of our grid.

The Styling

Ensure your images are positioned correctly with CSS:

css
.section__images {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
perspective: 100vh;

img {
position: absolute;
width: 10vw;

@media (max-width: 768px) {
  width: 20vw;
}

/* Position individual images */
&:nth-of-type(1) {
  top: 15vw;
  left: -3vw;
}

&:nth-of-type(2) {
  top: 5vw;
  left: 20vw;
}

}
}

This CSS positions your images to create a scattered look while ensuring the section maintains depth through perspective.

Step 2: Adding Animation with GSAP

Implementing ScrollSmoother

Utilize the ScrollSmoother plugin for a refined scrolling experience:

javascript
const scroller = ScrollSmoother.create({
wrapper: “.wrapper”,
content: “.content”,
smooth: 1.5,
effects: true,
normalizeScroll: true
});

This code creates a smoother transition as users scroll through your webpage.

Creating the Animation Timeline

Next, set up a GSAP timeline to handle animations:

javascript
this.timeline = gsap.timeline({
scrollTrigger: {
trigger: this.dom,
start: “top top”,
end: “bottom top”,
scrub: true,
pin: true
}
});

Animate smaller images along the Z-axis to enhance dynamism:

javascript
this.timeline.to(this.smallImages, {
z: “100vh”,
duration: 1,
ease: “power1.inOut”,
stagger: {
amount: 0.2,
from: “center”
}
});

Step 3: Main Visual and Split Text Animation

Integrating the Large Center Image

Add your primary image within the section and define a CSS variable for animation control:

css
–progress: 0;

.section__media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
transform: scale(var(–progress));
}

Animate the CSS variable instead of directly manipulating the scale property:

javascript
onUpdate: (self) => {
const easedProgress = gsap.parseEase(“power1.inOut”)(self.progress);
this.dom.style.setProperty(“–progress”, easedProgress);
}

Animating Split Text

For the text elements, split the text into two parts that move apart smoothly:

css
.left {
transform: translate3d(calc(var(–progress) * (-66vw + 100%) – 0.5vw), 0, 0);
}

.right {
transform: translate3d(calc(var(–progress) * (66vw – 100%)), 0, 0);
}

Step 4: Creating Layered Zoom and Depth Effect

Adding Image Layers for Depth

Introduce “front” images that mirror the background image:

css
.sectionmediafront {
img {
mask-image: url(./mask.png);
mask-position: 50% 50%;
mask-size: cover;
}
}

Animate the layers while manipulating scales to enhance depth perception:

javascript
this.timeline.to(this.frontImages, {
scale: 1,
duration: 1,
ease: “power1.inOut”,
delay: .1,
}, 0.4);

Final Touches with Blur Effects

To further refine the depth effect, apply a subtle blur to each image and animate it away during the transition:

css
.sectionmediafront {
filter: blur(2px);
}

javascript
this.timeline.to(this.frontImages, {
duration: 1,
filter: “blur(0px)”,
ease: “power1.inOut”,
stagger: {
amount: 0.2,
from: “end”
}
}, 0.6);

Conclusion

By following this tutorial, you’ve learned how to create a captivating layered zoom scroll effect with GSAP. This technique combines animations for depth and a smooth user experience, significantly enhancing your web project’s interactivity.

Related Keywords

• GSAP animations
• ScrollSmoother tutorial
• ScrollTrigger effects
• Interactive web design
• Web animation techniques
• JavaScript animation libraries
• Smooth scrolling effects

Source link