mrcl Posted May 4, 2023 Share Posted May 4, 2023 Hi everybody, I'm using matchMedia to control the width of an off-canvas menu which in itself works fine. But I realized that once the menu was toggled it automatically opens when resizing the screen. I don't get what I did wrong so I was hoping someone can point me in the right direction. Thanks in advance! See the Pen XWxzGeG by mrclstrtr (@mrclstrtr) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted May 4, 2023 Share Posted May 4, 2023 I assume you meant to do something like this?: See the Pen eYPyNGE?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
mrcl Posted May 5, 2023 Author Share Posted May 5, 2023 thank you Jack, that was what I was trying to do. If you have time I would be glad if you could give a short explanation why "currentAnimation" was necessary and what my mistake was setting this whole thing up? thanks again for the fast reply and help! Link to comment Share on other sites More sharing options...
GreenSock Posted May 6, 2023 Share Posted May 6, 2023 I save the in-progress animation in a variable so that we can kill() that animation if/when the user toggles things mid-animation. You don't want two animations both fighting for control of the same elements at the same time. You could use overwrites but I personally think that in this particular case since you've got timelines with some of the animations delayed, it's probably simpler/cleaner to just use a variable and kill() the whole thing at once. The main mistake you were making was that you created one handler for openNav and inside that you were creating a new matchMedia() every single time the user toggled which is technically not "wrong" (I'd argue it's wasteful though), but you had no proper cleanup for the closeNav() animations. Whenever you create animations inside a matchMedia(), GSAP automatically remembers those and reverts them when the matchMedia() no longer matches. You never did that with your closeNav(), so imagine what happens if the user resizes the screen WHILE the closeNav() animation is running - it keeps on going. It's just cleaner to set things up properly inside a matchMedia() like I showed - then the condition only has to run once initially (and when the screen resizes adequately) and you can ensure proper cleanup. Does that clear things up? Link to comment Share on other sites More sharing options...
mrcl Posted May 9, 2023 Author Share Posted May 9, 2023 Jack, thanks again for taking the time and explaining everything in detail. It helped a lot. Now I also know how to handle the "kill()" situation properly which was another problem I was aware of but didn't want to overcrowd my post with too many issues. Cheers! 1 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