Run timelineMax on click

[Catalin R.]

Hi,

I have a timelineMax which runs on a click event.

What is the best way to prevent to run the timelineMax again until the animation is completed?

Thanks!

[Shaun Gorneau]

There are a few ways you can do this ... one simple way is to set a global boolean, modify it within the click handler, and then modify it within the timeline's onComplete callback.

 

See the Pen KRxqvz by sgorneau (@sgorneau) on CodePen

 

[PointC]

In addition to @Shaun Gorneau's excellent advice, GSAP also has some built-in methods for this type of check.

 

https://greensock.com/docs/TweenMax/static.isTweening

https://greensock.com/docs/TimelineMax/isActive()

 

Happy tweening.

 

[Catalin R.]

Hi Shaun,

I've made a codepen with my case:

See the Pen BrZKGJ by ZenTao (@ZenTao) on CodePen

When I click an icon I want to do something with those divs "animateMe" and "fading". Is there any possibility to prevent to run the timelineMax again until the animation is completed?

https://codepen.io/ZenTao/pen/BrZKGJ

Thanks

Edited May 15, 2018 by DevSaver
Give a link to codepen

[PointC]

I'm not sure if Shaun will be online again today so I'll jump back in. It looks like you're using GSAP to set() a new class name on click, but that class is a CSS transition? That may cause problems as mixing the two will many times result in a fight for control of the element.

 

I don't think we understood you wanted to do this with multiple elements in a jQuery each() loop. Here's a basic demo of creating a timeline for each() jQuery element and checking a global variable to see if a click should allow the timeline to play. 

 

See the Pen rvZKVg by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

 

 

 

[Carl]

Great demo, Craig. I love how little code there is and how you take the time to make these so nicely responsive too