jefferson.dcruz

How do we achieve stop() function in GSAP similar to the jQuery?

Recommended Posts

Hello,

 

I was trying to make a hover function with GSAP with timelinemax. In this, there are lists of elements which on hover will take up an x position and moves back to original position on mouse out. But, here, when I move the cursor in between lists items, the animation doesn't stop, but instead, it waits for the previous one to finish. Traditionally in jQuery, this is achieved through stop() method. What can we do here? and how do we do it?

 

Thanks

Share this post


Link to post
Share on other sites

Problem is you are using a from tween, so as soon as you hover your element jumps to 10 pixels and animates back to 0. Also, you were using timeline and adding all those tweens to it even though you won't be reusing them.

 

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Thank you Sahil for your reply. Could you please explain, why simply changing the from tween would solve the problem? Why each function causes a problem here? Thank you

 

Share this post


Link to post
Share on other sites

When you define a from tween, GSAP will set your element to that position and animate back to original position. So for example if your element is at 0 and you create a from tween with value of 100, GSAP will set your element to 100 and animate back to 0. If while creating the tween if element was at 50, then GSAP will animate from 100 to 50. If it was already at 100, then nothing will happen because start and end positions are same.

 

I removed each because it was unnecessary. You can still use each and it will work.

 

Also, with GSAP you don't need anything like jQuery's stop. GSAP overwrites any tweens for same property of the element by default. You can change the overwrite behavior if you ever need, check the docs. https://greensock.com/docs/TweenLite

 

You can visit the learning page and youtube channel to get familiar with GSAP API,

 

https://greensock.com/learning

 

https://www.youtube.com/user/GreenSockLearning

  • Like 5

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.