Jump to content
Search Community

Problem with preventing the default click

sywei1 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


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

Link to comment
Share on other sites

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




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

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