Animating with JavaScript

John Lindquist: Let's switch from using styles for animations to using JavaScript. I removed the "styles.css" from here and I'm just going to add the TweenMax library.

TweenMax is a popular library for doing animations. It's super fast, very robust, tons of features. Definitely check it out, and I'll probably even do more videos on it because I like it so much.

Add the animation of ".toggle" because it's still a style name, you'll see here,. The class is "toggle" so because it's a class, add the dot.

Let's return an object, since it's ng-if animation that we're doing, the object has a leave. The leave will take a parameter of element. With that element you can do an animation when it triggers the leave.

I'll say TweenMax from-to, we'll say take the element for one second. Take it from an opacity of one to an opacity of zero. Then once we refresh over here, you can see I hit this and it will go away.

One thing I have to point out though, is if you inspect this element here, you can see that it's still there. That means that the ng-if hasn't applied and removed the element. That's because the second parameter here is a callback to "Done", so that once our animation is complete we'll assign that to "Done".

Once our animation is complete, it needs to call "Done". Now you can see if we try and inspect this, it's no longer there. If you can see the "DOM" on this tiny thing, it wouldn't be there either.

Basically it means that it has called "Done", it's removed the element, completely gone. If you forget to call "Done" on some of these animations, you'll just have things lying around, so never forget to call "Done".

Then the second part of this is just doing a very, very similar thing with "Enter". I will just copy this line, so we'll say TweenMax from-to. We'll start with an opacity of zero, because it's going to come in and be added, and then animate up to an opacity of one. We'll need the element and "Done" in here as well.

Once that's complete, we'll hit "Refresh", click "Toggle". It'll fade out. Click "Toggle" again. It'll fade back in.

If you actually watch, let me drag and make this a bit bigger, and will show you this element leaving and coming back in just so it makes a bit more sense.

Select it, and you can see once I click "Toggle"...I can make this a bit bigger too...once I click "Toggle", you saw the value going down and now the element has disappeared. Hit "Toggle" again, and you can see the value is going up. You can see what's going on there if you watch carefully. Leaving...coming back in.

That's the animation in JavaScript. TweenMax is an awesome from-to for these things. Again it's just going from one to zero. I think it makes a lot of sense, and you just use the animation service to define the "toggle" class and make sure that's mapped to the class here. There's many other ways to do animations, I hope to cover most of them...