Jump to content

marko krstic

Need to click twice to start animation

Moderator Tag

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

Hello good people. 

I have a strange questions. 
I created animation play / reverse, but to start it I need to click twice and after that it works as it's should be...


Any suggestion for this weird behaviour?


Thanks! ❤️ 

See the Pen aMmpZz by krstivoja (@krstivoja) on CodePen

Link to comment
Share on other sites

Change line 2 to this and you'll be all set.


var tl = new TimelineLite({paused:true, reversed:true});


Happy tweening.



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

WOW @PointC Thank you so much!


GreenSock is so much fun with this great and kind community ! 

  • Like 2
Link to comment
Share on other sites

Happy to help. :)


Just so you understand what was happening there:


Your timeline was paused, but not reversed. So on the first click the ternary operator checks to see if the timeline is reversed. It isn't at that point so the timeline reverses rather than plays. It appears that nothing happened because the timeline is at the beginning and has no place to go when it reverses, but is now in a reversed state. That's why the second click works and the timeline plays. Make sense?

  • Like 4
Link to comment
Share on other sites

@PointC Yeah. I was also playing with opacity. and In debug I saw that on first click it's setting opacity and then play. but could not figured out how to fix it. Thanks a lot

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.