Jump to content
Search Community

Completing a Timeline before starting another

ZigZag228 test
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, 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

Link to comment
Share on other sites

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.


  • Like 3
Link to comment
Share on other sites

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*


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.
  • Create New...