Menu animation only triggering on second click

[kathryncrawford]

Hello everyone!

 

It's been a while since I've used GSAP so I'm a little rusty. I have a little mobile menu here that I built out, then I realized that the tweens are only triggering (for both the toggle and the menu animations) on the second click. Looks like the first click does apply some inline CSS to the menu itself, but it doesn't play the "to" tweens until the second click. It only does this on page load though, once the tweens have run their course everything works as expected!

See the Pen zYYRJGw by kathryncrawford (@kathryncrawford) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

First thanks for being a Club member and support the development of GSAP!!!

 

Basically the issue is that a timeline instance is created going forward, so after is created reversed() returns false, so your timeline then goes in reverse. After that reversed() is true so it will go forward, that is why it works on the second click.

 

In this cases I normally add a reverse() call at the end of the timeline:

tl.to("#bar1", 1, {morphSVG: "#cross1"}, "menu")
  .to("#bar2", .05, {opacity: 0}, "menu")
  .to("#bar3", 1, {morphSVG: "#cross2"}, "menu")
  .reverse();

menu
  .to("#menu", 1, {left: 0})
  .reverse();

Like that the timelines are reversed so the code will work as expected.

 

Finally another trick is to toggle the reversed() state of the GSAP instance, like this:

play.onclick = function() {
  tl.reversed(!tl.reversed());
  menu.reversed(!menu.reversed());
}

Happy Tweening!!!

[ZachSaucier]

One other thing in addition to the great advice of Rodrigo: it might be good to add both of these timelines to one "master" timeline, both starting at the 0 position since they're always going to be paired together. That way you don't have to worry about controlling two timelines, you can just control the master one  

[kathryncrawford]

Great responses @Rodrigo and @ZachSaucier! Thanks so much for the advice.