Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kjaano

Burger navi animation

Go to solution Solved by Carl,

Recommended Posts

Hi :)

 

Navigation is showing when I reload codepen url. How to make it visible only when burger button is clicked?

See the Pen XWMwWzE by ManiacMaxo (@ManiacMaxo) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,

 

thanks for providing the demo.

 

it seems your animation is set up to start with the menu open and then close it.

I forced the animation to it's end (closed state) using progress(1) at the end of the timeline.

 

it also seems your css is set up so that the page loads with the menu items visible. 

I set the opacity to 0 in the css and toggle it back to 1 once the page is loaded using 

 

gsap.set(".menu-overlay", {opacity:1})

 

See the Pen PojVQLv?editors=0110 by snorkltv (@snorkltv) on CodePen

 

  • Like 7
Link to comment
Share on other sites

1 hour ago, Carl said:

r providing the demo.

 

it seems your animation is set up to start with the menu open and then close it.

I forced the animation to it's end (closed state) using progress(1) at the e

Thank you Carl! 

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.
×