Jump to content
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

See the Pen rQKWoM by anon (@anon) on CodePen

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.

 

See the Pen mQKRPo?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

 

  • 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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.