Fullscreen menu not updating on browser resize

[cereal_beast]

Im having an issue with a fullscreen menu, using CSS it is set to "transform:translateX(-100vw);" so that it starts off the page to the left, then using GSAP it animates to show fullscreen using "x:0". The problem is the 100vw doesnt seem to be updating when the browser is resized. If you look at my codepen, make the browser smaller and refresh the page, open the menu, make the browser bigger then close the menu, you will see that it doesnt close all the way as its remembering the old width. 

 

See the Pen PoRwvpB by gjjr (@gjjr) on CodePen

[mvaneijgen]

My feeling is that 'normal' people don't resize their browser while looking at webpages. This is only something developers/designers do.

 

But then there are multiple ways to fix it, you could listen to a browser resize event `window.addEventListener('resize', reportWindowSize);` and then reset your timeline. 

 

Or as bellow set the logic in GSAP. I've removed your css transforms and created a `gsap.set()` which moves the panel over `xPercent: -100` and then set `xPercent:0` in your logic instead of `x:0`. Due to doing it with JS is that it only updates when the JS is fully loaded, so you see the menu on frist page load, but that is easily fixed setting is initial `visibility: hidden;` with CSS and then updating the `autoAlpha: 1` in the animation. Take look ash the FOUC blog post 

 

 

See the Pen KKowOVZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[cereal_beast]

Thats great thanks!

[cereal_beast]

Im having an issue with the FOUC, ive set the opacity to 0, and autoAlpha to 1 but the animation plays briefly and then disappears? Any idea why thats happening?

 

Working example here:

See the Pen MWVYNdR by gjjr (@gjjr) on CodePen

[mvaneijgen]

Because you are setting it in your `.from()` animation. It will animate from and `autoAlpha` of `1` to its current value, so in your case it will animate to an `opacity` of `0`.

 

Right now I've used a `.set()` to as soon as the timeline play set the opacity to 1, so that they show for your next tween

 

See the Pen LYdVEQE?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

 

Side note: please don't private message people on this forum, there is no need. We're getting a notification automatically when someone replies to a topic someone has posted too. You'll maybe have to wait a bit, but PM-ing people will not get you any help faster. 

[cereal_beast]

Thats super helpful thank you!

Apologies for the DM, I thought that because I had marked the question as "solved" you may not be notified.