Animating with a Click: Code not Working

[amanfromsolan]

Hello there!

I'm just starting out on JavaScript, and I found out GSAP animations are 20X faster than jQuery's (thanks to this article over here: https://css-tricks.com/myth-busting-css-animations-vs-javascript/), so I'm keen on learning it.

 

I have a navigation bar that should close as soon as I press the close button. But it closes as soon as the page loads (not on the click). I'd appreciate your help.

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

[joe_midi]

Hey @amanfromsolan!

 

I noticed two things about your code:

var button = document.getElementsByTagName("button");

button.onclick = navAnimation.play();

getElementsByTagName will actually return an array of all the elements with that tag name, so you'll need to place the click onto its index within the array, like button[0].

 

 

And you need to assign on click a function, rather than associating navAnimation.play() to it.

 

So more like:

button[0].onclick = function() {
 navAnimation.play();
}

See the Pen vXggyV by joemidi (@joemidi) on CodePen

[amanfromsolan]

Thanks, Joe.

 

I see now where I was going wrong. Will be sure to use array index when getting elements by tag name.