Jump to content
Search Community

Menu animation only triggering on second click

kathryncrawford test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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")

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

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() {

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

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 :) 

  • Like 3
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...