Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1055 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Delay and Ease Angular 2 Animations

3:11 Angular 2 lesson by

By default, transitions will appear linearly over time, but proper animations have a bit more customization to them by delaying when they start and controlling how slowly or quickly they move over time.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

By default, transitions will appear linearly over time, but proper animations have a bit more customization to them by delaying when they start and controlling how slowly or quickly they move over time.

Avatar
inlightmedia

What if I want to do more than one animation simultaneously. It seems that in each state it runs the animations synchronously.

By changing this number into a string, we'll start with 0.5 seconds, we can add other things to it like delay, so I'll say delay one second. When I save and run any of these animations, I'll hit toggle, delay one second, stop, delay one second, go, delay one second.

Each of these will have this minor delay between the actual animation time, which is still 0.5 seconds. Then after that, you could also add in easing, so I'll say ease out. I'll hit save. I'll hit toggle, I'll see a delay, and then it slows down on the way to the end of the animation. We'll make this a bit longer so that's more obvious.

I'll make the animation two seconds, the delay one second, and it's easing out. Toggle, then it slows down as it gets to the end. Slows down as it gets to the end, and go, it slows down and gets to the end.

For really advanced easing, if you go to the Web animations API on the W3C site, and you scroll down to 3.11.3 to look at the scaling using a cubic Bézier curve, you can see we can also pass in, so we'll have ease, linear ease in, ease out, ease in out.

Could also pass in a function that defines this curve that the animation is going to work on. If I were to copy and paste the ease out curve, so cubic Bézier, 0, 0.58 and 1, and paste that here inside of the string, this will perform the same behavior, because this curve from X, 0, Y, 0 and 0.58 and 1 represents that ease out behavior. You'll see this same behavior there.

If you go to easings.net and you pick one of these functions, we'll try ease in out quad, and you grab the cubic Bézier defined here. We'll copy this and paste this here. You'll see this ease in out quad behavior, so when I hit toggle, it eases in, and eases out. Eases in, this is again after that one second delay, and eases out. Delay, then ease in and ease out.

This easings.net site will pretty much have you covered for any of the easings you can achieve through cubic Bézier. Even one like ease out back that would...this one will overshoot, because you see 1.2 goes greater than 1.

When I paste this in here, you'll see this animation will go a bit too far and then come back, so we'll toggle, delay, come a bit too far, and then come back. Stop. Bit too far, and then come back.

You get a lot of power with these, and you can just come in and copy paste those cubic Béziers or save them as strings somewhere. You can [inaudible 2:57] in.

Some of these, the more advanced ones, you'll see at the bottom here, like ease in out bounce, have too many steps in it to allow a CSS representation of it, so you're going to have to represent that in Angular 2 using something like key frames.


Featured course:

Building apps with Ionic 2

Building apps with Ionic 2

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?