Need to click twice to start animation

[marko krstic 12 Likes (Newbie)]

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

[PointC 14,418 Likes (Superhero)]

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

 

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

 

Happy tweening.

 

[marko krstic 12 Likes (Newbie)]

WOW @PointC Thank you so much!

 

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

[PointC 14,418 Likes (Superhero)]

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?

[marko krstic 12 Likes (Newbie)]

@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