Opening/Closing Animation on Nav

[Zappy]

Hello,

 

Im new to GSAP and want to learn more about the Animations i can create, first i tried to do a Burger Nav with opening and closing animations, got the opening but could figure out how to do the closing one.

 

Thanks for the help!

See the Pen LYNvaoV by DrZappy (@DrZappy) on CodePen

[ZachSaucier]

Hey Zappy and welcome to the GreenSock forums. 

 

The first issue is that you have two tweens saved to two variables but the two variables have the same name so the second one overwrites the first one. I assume you don't want that to happen? You probably want to use a timeline instead. 

 

Second, your toggling of the class immediately hides the list elements so that's why you don't see the animation when you click it every other time. That's a CSS issue. I might recommend just using GSAP for all of your animations instead of toggling a class and using CSS transitions. At the very least remove the display: none; from the #navigation CSS. Alternatively you could leave it in the CSS and handle the display toggling via JS at the appropriate time (like I did in the demo below).

 

Besides that, in situations like these it's best to create the animation beforehand and to use control methods inside of the event listeners. You are doing that, but instead of just using .restart() I'd likely recommend using .play() and .reverse() instead. I write extensively about this sort of thing in my article about animating efficiently which I highly recommend. 

 

Here's how I'd set it up:

See the Pen gOrJbyj?editors=0010 by GreenSock (@GreenSock) on CodePen

[Zappy]

Thanks for ur Reply, that worked pretty well for me!

 

One thing thats still not working would be to disapear the Nav after clicking a Link, cant get it to work.

[ZachSaucier]

Put the function that I have inline within the event listener as a named function and call it when you click a link.

[Zappy]

Tried to do it but couldnt get it working, really should learn Javascript.

I created: 

var links = document.querySelector('#navigation ul li');

var myAnimation = function animation() {
	tl.reversed() ? tl.play() : tl.reverse();
};

 

and then i did this:

links.addEventListener('click', function() {
	myAnimation.call();
});

 

[ZachSaucier]

Hey Zappy. You should read the documentation for each method so that you understand what it does. For example the .call() method because your usage of it doesn't make any sense  

 

It should end up looking something like this: 

See the Pen LYNKxEB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I highly recommend my article about animating efficiently because it talks in more detail about the approach and code I used here.