Timeline and button issues

[greykrav]

Good evening,

I want span one and two to rotate inward causing the cross menu effect however they are just disappearing entirely on click, but I would like this button to remain visible on the right side of the screen while showing the navigation menu , also when the screen is resized to mobile you will notice a black space on top of the image full screen background, how can I fix these issues? 

any advice appreciate. thank you.

See the Pen xQXKPK by kravmaguy (@kravmaguy) on CodePen

[Sahil]

Your spans have white background so they weren't disappearing just you couldn't see them. toggle-btn had typo in css so it wasn't getting position fixed.

 

The menu is visible on mobile because you were animating to -100% but your element had height 100vh, so it would stay in viewport because whatever '100%' is, it was less than 100vh.

 

You should avoid animating height, width, top, left etc because they trigger layout repaint, animate transforms instead whenever possible because they take advantage of GPU and perform better. So your animation can be achieved animating yPercent instead of top. You can learn more about animating transforms, https://greensock.com/docs/Plugins/CSSPlugin

 

See the Pen yQzjVa?editors=0110 by Sahil89 (@Sahil89) on CodePen