Why do I need to click twice on the burger menu to run the animation

[HomTom]

In my CodePen example, when I first come to the page, I have to click the burger menu twice in order to run the animations.

Why is that?

How can I fix it, so that only one click runs the animation.

See the Pen GRpjxZX?editors=0010 by itsthomas (@itsthomas) on CodePen

[ZachSaucier]

5 minutes ago, HomTom said:

when I first come to the page, I have to click the burger menu twice in order to run the animations.

Why is that?

How can I fix it, so that only one click runs the animation.

Your logic is as follows:

if(tlBtn.reversed()) {
  tlBtn.play()
} else {
  tlBtn.reverse()
}

By default, the timelines play forward, so tlBtn.reversed() will be false, which makes it call .reverse(). Then the next time it is clicked, .reversed() will be true, and your button works as it should.

 

To fix it, simply set reversed: true on the timelines.

 

Same thing as 

 

 

I highly recommend searching through our forums for questions like these