Change slider direction on mousemove

[rala]

Hi, I'm using an example found on the forum in order to make a seamless slider as a marquee for the team free long image, and its works fine but I'm trying now is to reverse the animation when the mouse is on the left  to start from the left and make the animation start from right when the mouse is on the right but until now I don't like the result 

See the Pen qBmpZQR by roleno (@roleno) on CodePen

[Rodrigo]

Hi,

 

I would advice you against modifying the helper function and add that custom logic to the Timeline instance returned by it. Keep in mind that GSAP can animate any numeric property of any object you feed to it and since tweens and timelines are just javascript objects you can tween properties of them, such as timescale.

 

In this case is better to detect the mouse position and based on the half of the screen the mouse is, switch a direction value and tween the timescale of the timeline returned by the helper function:

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

 

Hopefully this helps.

Happy Tweening!

[rala]

Thanks a lot for your help each time I used GSAP discovered that I know nothing about it. or maybe the examples always simple not have advance cases with explain  I want to ask is there advance course in GSAP which can help me to professional when using GSAP with any website ?

[Rodrigo]

Hi,

 

@Carl has some great resources to learn at extremely convenient prices. He has more than 10 years of experience with GSAP and is a great teacher, so I would totally recommend it:

https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484

 

Happy Tweening!