Completing a Timeline before starting another

[ZigZag228]

Hello, I am having a problem in creating a hover dropdown using GSAP animations to stagger in links after the container fades and drops in. After the user hovers off, it does another timeline in reverse. However, if a user were to go back and forth too quickly there are partial or full loops of the animations over and over depending on the swipes across the trigger. I am wondering if there is a way GSAP knows and animations are playing and will not allow another set to run if another is playing. Something along the lines of if tl starts and the user hovers off then it finish before starting timeLine's animation...?

 

Thanks in Advance!

See the Pen NojZpe by Code-Cafe (@Code-Cafe) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

 

Before you get into having one timeline to play the "in" animation and another for the "out" animation, you should probably re-structure things a bit.

Currently you are adding NEW tweens to the same timeline on each mouse event. So your tl and timeline timelines keep getting longer and longer with new tweens added to the end on each mouse event.

 

Please see this pen where I added some logs (open the console)

See the Pen XOgXEV?editors=0011 by GreenSock (@GreenSock) on CodePen

 

Spend some time, studying @Jonathan's example here: 

 

You will see that each nav item has its own timeline. That timeline gets either played or reversed on each event.

New tweens are never added after the timeline has been initially created.

 

[ZigZag228]

Thank you @Carl for your help, on the question. Do you think that if, instead of using a TimeLineMax Function, I could instead use simpler TweenMax functions with delays that function similarly to a timeline?

Would this fix the issue of it stacking to an even longer timeline with each hover?

Again, Thanks for the help!

 

*Edit 1*Decided to test it out rather than ask, and actually, this does work well in comparison to the TimeLineMax *Edit 1*

*Edit 2*For anyone who cares, found a way that is tens of lines shorter and works on a click-based CSS class togglesystem*Edit 2*