Problem with preventing the default click

[sywei1]

Hi,

I have an issue with clicking the "menu" button on the page,

it doesn't do anything until you click it the second time and it always adds the "#"  at the end of the URL.

 

I tried to prevent the default click, it doesn't seem to work.

Does anybody have ideas of what's going on?

 

Thank you for the time to read my post.

 

See the Pen MOmVad by sywei1 (@sywei1) on CodePen

[Carl]

Thanks for the demo.

 

You have code in your click handler that says
 

if the tlMenu is reversed then play, or else reverse it

 tlMenu.reversed() ? tlMenu.play() : tlMenu.reverse();

 

When your app loads the tlMenu is paused at the beginning and it is NOT reversed.

Since it is not reversed before the first click, it becomes reversed ON the first click. Reversing a timeline that is paused at the beginning isn't going to really do anything that you can see.

On the second click the timeline is now reversed so it then plays.

 

The solution is that you need the timeline to be reversed BEFORE the first click... immediately when the timeline is created.

Just add this to your pause()

 

tlMenu.paused().reverse();

 

I'm not sure why e.preventDefault() isn't working.