Masking is not align with the high speed scroll.

[Mohit Pain]

Hey, I'm trying to apply a zoom masking effect where, as I scroll down, the text scales up. But when I scroll back up quickly, the masking doesn't align properly with the scroll speed.

See the Pen gbPBeOo?editors=0010 by glscoexd-the-sans (@glscoexd-the-sans) on CodePen.

[GreenSock]

I'm not sure exactly what you mean by "doesn't align", but keep in mind: 

1. You've got scrub: 1 which means that it'll intentionally lag 1 second behind (it takes 1 second to "catch up"). If you don't want that, just set scrub: true instead so there's no lag. 
2. You're scaling the item to 160,000% of what it normally is which is HUGE and that puts a lot of pressure on the browser's graphics engine to render. That's unrelated to GSAP. So think of how many pixels the browser must calculate at that size, even if only a portion of those are shown inside the viewport. So just be careful because it's a performance load. 
3. You don't have an ease defined, so it'll use "power1.out" by default, so that'll do more of the change in the beginning and slow down toward the end. Perhaps you prefer to use a linear ease?

Is this any better? 

See the Pen QwyZryj by GreenSock (@GreenSock) on CodePen.

[Mohit Pain]

On 11/2/2025 at 1:51 AM, GreenSock said:

I'm not sure exactly what you mean by "doesn't align", but keep in mind: 

1. You've got scrub: 1 which means that it'll intentionally lag 1 second behind (it takes 1 second to "catch up"). If you don't want that, just set scrub: true instead so there's no lag. 
2. You're scaling the item to 160,000% of what it normally is which is HUGE and that puts a lot of pressure on the browser's graphics engine to render. That's unrelated to GSAP. So think of how many pixels the browser must calculate at that size, even if only a portion of those are shown inside the viewport. So just be careful because it's a performance load. 
3. You don't have an ease defined, so it'll use "power1.out" by default, so that'll do more of the change in the beginning and slow down toward the end. Perhaps you prefer to use a linear ease?

Is this any better? 

 

 

Sir, your solution is perfect, but the text zooming is too fast.. can you please make it slow and ease.

i have set ease:"none" and "end" also "gsap.to(".text-container", {
  scale: 200,
  ease: "none",
  scrollTrigger: {
    markers: true,
    trigger: ".data-container",
    pin: true,
    scrub:true,
     end: "bottom+=1300 top",
  }
});" but when i scroll back the scale animation ends too fast.

Edited November 3, 2025 by Mohit Pain

[Rodrigo]

Hi,

 

As Jack mentions this is due to to the scale value you're applying, because of that at some point the scale keeps growing as you scroll but the text already covered the entire screen so the animation keeps going even though is not perceptible. The solutions are to use a smaller value in combination with some translate or use a larger end value in ScrollTrigger.

 

I updated our demo:

See the Pen QwyZryj by GreenSock (@GreenSock) on CodePen.

 

Finally I would strongly recommend you to check this thread by @mvaneijgen on the subject:

 

Happy Tweening!