matchMedia question

[mrcl]

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

[GreenSock]

I assume you meant to do something like this?:

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

[mrcl]

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!

[GreenSock]

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? 

[mrcl]

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!