Override scrollTrigger's prop with mouse move

[Cyr]

Hello,

I'm currently working on an animation using GSAP and would appreciate your feedback on a specific animation. The idea is to replicate the effect seen on the website https://vucko.co/ (or video showing the animation attached to this post) in the hero section, where a video follows the mouse, enlarges, and repositions upon scrolling.

I've created a simple CodePen: https://codepen.io/seabon/pen/LYqoxvq

 

I'd like to move the blue square along the x-axis with mouse movement and simultaneously animate it with scrollTrigger. I'm animating the x position in the onMouseMove function. The issue is that when I scroll, the blue square jumps to the scrollTrigger position. How can I combine the x position related to the mouse and the one from scrollTrigger?

 

Am I approaching this correctly, or are there other ways to achieve this?

 

Thank you.

 

See the Pen LYqoxvq by seabon (@seabon) on CodePen

[mvaneijgen]

Hi @Cyr welcome to the forum and thanks for being a club member!

 

A way of going about this would be to tween the x property and the xPercent property (see pen below) or you could wrap your element in an extra parent and have one tween target the child and the other the parent, then you can circumvent creating conflicting tweens. 

 

See the Pen GRzaWem?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Just FYI, we love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide "how do I recreate this cool effect I saw on another site?" tutorials. Please keep that in mind. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

The demo you share does some more logic, because it can't move outside of the box it is in. It is also moving less the larger it grows. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with, so just keep hammering away an eventually you'll stumble upon the perfect solution! If you have some more GSAP specific questions let us know and otherwise love to see when version 10 is done 😄

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

Maybe something like this could be a good starting point:

 

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

 

Hopefully this helps.

Happy Tweening!