Jump to content
Search Community

Toggle Between Multiple GSAP Timelines

TradingBo test
Moderator Tag

Recommended Posts

Hi Support,

 

Having a bit of difficulty toggling between GSAP timelines for a menu animation.

Do I need to clear/invalidate timelines to return them to original state before triggering them again? 

 

const menuIn = gsap.timeline({ paused:true })
const menuOut = gsap.timeline({ paused:true })

I'm trying to elaborate on this shorthand if/else statement using tl.reversed() with a single timeline ( which works great ) .

 

tl.reversed() ? tl.restart() : tl.reverse(); 

When trying to adapt it to use tl.paused() with two separate timelines I can't quite get it to work.

 

// on click event listener

menuIn.paused() ? menuIn.play() : menuOut.play() && menuIn.paused(); 

// if paused => play in => else play out && set in to paused again

 

It works once for each animation, then fails to iterate on subsequent clicks. Would I need to reset the timelines to original state somehow in the statement?

 

Also having a weird DOMException error in Codepen trying to use GSAP x3  on there for some reason,

have I declared gsap.timeline wrong for this version?

 

 

See the Pen vYyVXyO by EasterIslandMedia (@EasterIslandMedia) on CodePen

Link to comment
Share on other sites

Hey TradingBo.

 

You're making some of the most common GSAP mistakes — I recommend going through the article :) Also instead of a zero duration .to() we recommend using .set(). 

 

1 hour ago, TradingBo said:

having a weird DOMException error in Codepen trying to use GSAP x3  on there for some reason,

have I declared gsap.timeline wrong for this version?

That is a very weird error... I don't know why that's happening. It seems to be due to something inside of CodePen itself - if you run the debug view of the pen it doesn't throw the error.

 

As for your main question, creating two different animations (for the intro and exit) at the start and using control methods is a tricky situation. There are a few different methods you could use:

  • Don't use two different animations - just use one and reverse it on exit. In a lot of cases this is a good option for these sorts of toggled animations.
  • Use two different animations but generate them as needed. What I mean by this is that you could, when clicked to open, dynamically create an animation to run with the necessary end values (and optionally use a duration based on how far the value(s) need to change). Make sure to overwrite any previous animations applied to the targets. This would allow you to toggle the state while a previous animation is still running but it more work.
  • Use two different animations but don't allow them to overlap. You can do this by either detecting if a previous animation is running (and don't do anything in the click event if so) or by using a single timeline and using .tweenTo() and labels. I talk more about the second way here in my article about animating efficiently (I highly recommend going through the whole thing).

 

  • Like 1
Link to comment
Share on other sites

Hi Zach,

Thanks for the quick response.  I'll definitely have a read through that article, still getting to grips!

 

I think the tweenTo() direction might be best solution from the sounds of it, I was just trying to avoid adding too much timeline logic to the mix.

The tl.restart() method for single timelines is just so simple, thought there might be a similar solution along those lines! 

 

Thanks for the heads up @tailbreezy i've updated the codepen to fix the issue, now it actually works.

 

I'll post the final snippets here when I get there.

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...