Jump to content
Search Community

Side Menu Reverse Problem

kasim444 test
Moderator Tag

Recommended Posts

Hi everyone. First of all, I wish everyone a good evening. 
 

I'm new to Gsap. I made an animation of myself using the side menu animation Timelinemax. There is no problem in opening and closing the side menu. I can open and close Timelinemax I have done with "t1.reverse()". But I want my menu to close when I press anywhere on the ".overlay". It closes Timelinemax with reverse, but the animation starts from halfway when you re-open the menu. I have been dealing with this problem for a long time. Where do you think the mistake is? I would be glad if you can help.
 

I wish you good work.

See the Pen RwPqWaL?editors=1111 by kasim444 (@kasim444) on CodePen

Link to comment
Share on other sites

Hey Kasim and welcome to the GreenSock forums!

 

I highly recommend using GSAP 3's formatting. 

See the Pen GRJwobJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Other things that you could do to improve your code:

  • Don't toggle classes. Just use a variable to keep track of the state.
  • Use callbacks instead of setTimeouts to change things when necessary. That way you avoid errors like if someone switches tabs during an animation.
  • Don't use jQuery's animation functions. They're slooow
  • In fact, I would recommend not using jQuery at all. It's just overhead/extra stuff to load. Vanilla JS is good these days :) 
Link to comment
Share on other sites

45 minutes ago, ZachSaucier said:

Hey Kasim and welcome to the GreenSock forums!

 

I highly recommend using GSAP 3's formatting. 

 

Other things that you could do to improve your code:

  • Don't toggle classes. Just use a variable to keep track of the state.
  • Use callbacks instead of setTimeouts to change things when necessary. That way you avoid errors like if someone switches tabs during an animation.
  • Don't use jQuery's animation functions. They're slooow
  • In fact, I would recommend not using jQuery at all. It's just overhead/extra stuff to load. Vanilla JS is good these days :) 

Thanks your answer.

I think I misrepresented myself. Currently, there is no problem in the menu toggle button. the main problem is overlay click event. Clicking overlay, the menu animation works correctly. the animation does not work correctly whenever we open the menu again. 

Link to comment
Share on other sites

5 minutes ago, kasim444 said:

I think I misrepresented myself. Currently, there is no problem in the menu toggle button. the main problem is overlay click event. Clicking overlay, the menu animation works correctly. the animation does not work correctly whenever we open the menu again. 

Oops, sorry forgot to test that. 

 

You should move the logic to its own function so you don't have to repeat it in each listener. Something like this:

See the Pen WNvYwyz?editors=0010 by GreenSock (@GreenSock) on CodePen

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