Sliding Menu on resize issue

[hemanidesigns]

Hi!

 

I'm currently trying to make a menu that slides in from the left. The menu would be set off the page, but not all the way. I've got the menu working on load, but I'm running into an issue when resizing. If I open menu and then resize while it is open, it does not move back to the same position when closed. I've been trying to find a solution but am unsure how to approach it.

 

Any help would be greatly appreciated!

 

 

See the Pen MWONaQw by hkapoor2001 (@hkapoor2001) on CodePen

[mvaneijgen]

This is always a thing with designers and developers, but the thing is normal people don't resize their browser often, that is only something we do all the time, so I wouldn't worry about it too much. 

 

But if you really like a fix why don't you listen for browser resize and then reinvoke your menu function so that it rerenders it self? 

 

 

window.addEventListener("resize", yourFunction);

 

[hemanidesigns]

Thanks for your answer!  I have a line of window.addEventListener("resize", CloseMenuOnResize), which calls OpenCloseMenu if the menu is visible, reversing the menu timeline. Is this what you meant? I'm still having the issue that when the menu timeline reverses, the menu is not returning to the same position.

[OSUblake]

Hi hkdesigner, 

 

You're animation does not know about the changes you made on resize. I would just create a new one like this.

 

See the Pen ZEagPJz by GreenSock (@GreenSock) on CodePen

[hemanidesigns]

Thank you so much for your help! I looked over your codepen and looked up progress and reversed and am trying to understand them. I hadn't realized they are something you can do with gsap!

 

I have a few questions so I can understand the solution if that's ok.  menuTL.reversed(false).progress(0).clear(); is line that checks if the menu should be reversed , correct?  Does progress (0) and clear set the timeline back to the beginning and clear the values so that the animation can know about the resize changes? 

 

Thanks again for your help!

[OSUblake]

The first thing to understand about a lot of methods like reversed and progress is that they act as a getter and setter depending on if you pass in a parameter.

 

tl.progress() // gets the timeline's progress

tl.progress(0.5) // sets the timeline's progress to halfway

tl.reversed() // gets the timeline's reversed state

tl.reversed(true) // reverses the timeline

 

4 minutes ago, hkdesigner said:

menuTL.reversed(false).progress(0).clear(); is line that checks if the menu should be reversed , correct?

 

No, that's just putting the timeline into its starting state, which will make sure everything is back in place, and then the clear at the end empties the timeline so I can rebuild it. If you didn't set the progress back to 0 and the animation didn't finish then it would be using the wrong starting values.

 

And then the toggling action happens here. Notice that it's using a reversed getter and setter. There is no need to keep track of if it's open or not, you just do the opposite of its reversed state.

 

menuTL.reversed(!menuTL.reversed());

 

 

 

[hemanidesigns]

Thanks for your helpful explanation and the resources! I will definitely look into them.