Problem creating an Open/Close Nav Toggle

[amanfromsolan]

I'm trying to create a Open/close toggle for the navigation using the TweenMax's play() and reverse() functions and also a bit of jQuery.

 

The navigation closes fine but has trouble opening up again. I have attached a codepen demo for something you can tweak around with.

See the Pen pExEWo by amanfromsolan (@amanfromsolan) on CodePen

[OSUblake]

You should never set an event listener like this unless you are trying to overwrite/prevent some type of behavior. The "=" sign sets a value, so it will overwrite anything that was previously set. Use .addEventListener() or jQuery's .click() instead.

button.onclick = function() {
  slideUpAnimation.play(0);
}

But that's not the real issue. Your if statement is only being evaluated once. Here's a simple way to toggle animations.

See the Pen NROjgN?editors=0010 by osublake (@osublake) on CodePen

 

I explain how that works in this thread.

http://greensock.com/forums/topic/13268-how-to-toggle-tweens-in-a-dry-fashion/

 

.

[amanfromsolan]

Many thanks for helping again, Blake. I was already wondering on the difference between onclick and addEventListener method. I'll make my switch now.