Jump to content
Search Community

Timeline and button issues

greykrav test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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


  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...