Jump to content


Failing Animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Dear GreenSockers,

I have been making button animation for mobile navigation. Looks everything nice, but sometimes when you don't wait until animation end and you press button again, animation breaks and in the end I have this (see image).


What I am doing wrong here?



See the Pen yEgBGr by MantvydasBinderis (@MantvydasBinderis) on CodePen

Link to comment
Share on other sites

I didn't see it break, but when something is clicked too quickly it can cause an overwrite and the elements can get into the wrong starting position. You can always make a timeline and play/reverse on click. 


You could also check if something is tweening and prevent additional clicks by using the isActive() or TweenMax.isTweening() methods.





Happy tweening.



PS Your pen is using an old version of GSAP (1.18.0). I know it's confusing as it says latest, but if you use the Quick-add drop down in CodePen, you should get the current version. 2.0.1. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>



  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Not the answer I was looking for but thanks for trying to help :)

Link to comment
Share on other sites

You should create single timeline with all tweens as PointC sayed ^ for better control but I dont recommend to use reverse, instead, create another "reverse" timeline and manage state using internal variable (it's simpler than adding/removing classes to DOM element). After that you have several options when state changes:


1. block state change if some of timelines is active.

2. kill() or finish opposite active timeline and start target state change timeline.

3. combine timelines, but it's not needed as it is only two states.. (on/off)


also, you can re-create timelines every time instead of using same timeline instances (they will overwrite each other as they use same targets) but you have to hold those instances in memory for further checks.


  • Like 2
Link to comment
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.