How can I unapply a gsap animation or toggle the Set command.

[TouchPotato]

Im making a responsive navbar using GSAP and ive noticed that when i switch to mobile view to desktop view then back to mobile view it doesnt remove the css and animations applied from gsap and media queries.

 

If you load the codepen you can see that there is a nav bar, if you shrink the browser to smaller then 900px width you can see that it turns into a burger icon and if you click on this is does a nice animation to expand the burger for mobile view, the problem is that when expanding the view back to normal (more then 900px) it still hides the navbar for some reason. Ik that i can use vanila js to apply and remove a class with all the styling i want but i feel like there should be a way to use gsap aswell.

Thanks!

See the Pen RwMJrbP by TouchPotato (@TouchPotato) on CodePen

[GreenSock]

Yes, GSAP would have no idea that you want it to remove inline styles at those media query breakpoints. You can use gsap.set(".class", {clearProps: "all"}) to get rid of them. 

 

But watch for our upcoming release because there's a brand new feature that will come in very handy in a situation like this. You're gonna love it.