kasim444 Posted March 25, 2020 Share Posted March 25, 2020 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 More sharing options...
ZachSaucier Posted March 25, 2020 Share Posted March 25, 2020 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 More sharing options...
kasim444 Posted March 25, 2020 Author Share Posted March 25, 2020 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 More sharing options...
ZachSaucier Posted March 25, 2020 Share Posted March 25, 2020 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 1 Link to comment Share on other sites More sharing options...
kasim444 Posted March 25, 2020 Author Share Posted March 25, 2020 Thanks a lot. Health to your labor 🙏. Gsap my new favorite animation library 💖 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now