Jumpy ScrollTrigger with mousemove parallax background

[roryjohnson]

Hi all,
I would like scroll to zoom in (using gsap scale) and by moving the cursor, there will be the parallax effect where background and images are moving (using the mousemove and transform translate). Now, when i scroll it zooms in but when i move the cursor, it zooms out and is jumpy. I dont want it to zoom out when i move the cursor. I'm guessing its from the gsap scale factor.

How do I maintain the scale factor so that when I move the mouse after scrolling, it won't zoom out?

Thanks,

Rory

See the Pen dyEeoyZ by roryjohnson (@roryjohnson) on CodePen

[Rodrigo]

Hi,

 

The main issue is here:

move.style.transform = "translateX(" + x + "px) translateY(" + y + "px)";

You're applying some styles to the transform property directly in the mousemove event handler, but GSAP is doing the same with the Timeline controlled by ScrollTrigger, hence the jump.

 

Better leave all the work for GSAP, because GSAP is smart enough to animate each transform property independently without affecting any values. Here is a fork of your demo:

See the Pen mdYKOwK by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!