FREELessons: 5Length: 46 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Property and Animation Parameters

If you want to customize your animations, a very simple method is to use the property and animation parameters. These refer to things like animation duration, delay and so on.

Let’s have a look at some of these parameters and how you can use them.

2.3 Property and Animation Parameters

If you want to customize your animations, a very simple method is to use property and animation parameters. And these refer to things like animation duration, delay, easing and so on. So let's take a look at some of these properties, or parameters and see how you can use them. Let's start with property parameters duration and delay. This basically refers to how long should an animation go for, and how long should pass before an animation starts. So to give you a few examples, I have three circles here. And I'm gonna start with the very first one, anime, I'm gonna target the first circle. And let's say that I want to do a translateY: 500. Right, that happens like this, 500 is a bit too much, so let's say 300. Okay, now what if I want to modify the duration? Well, I can simply say duration and I can put something really crazy, like 5000. That's gonna take five seconds to complete. Or I can put something like 500, which will take, 500 milliseconds to complete. What if I want to delay the start of the animation by one second? Well, really easy I just say delay 1,000. And 1,000 means 1,000 milliseconds, which is one second. So refresh, wait one second and then the animation starts. Well, by using these two properties you can create some very interesting effects, like cascading animations. So for example, I can start this first animation, and then I can start the second animation with the exact same values, but only the delay is gonna be 1,000 which is the delay of the first animation plus its duration which is 500. So that's gonna allow me to, first, execute the first animation and then the second one. If I want to execute a third animation, well, really simple, To do, I just target the third. I set the same duration, but the delay, it's gonna be 2000 this time. So let's refresh first, second, third, so that's one way to use duration and delay. Now, what about easing? An easing refers to the curve of an animation. It basically tells you how fast or how slow an animation should go depending on the time code. So in my case, this has a default easing applied to it, but let's change the first easing to linear to the first circle. So you can see the difference between linear. Yeah, that's linear and the other two have another easing. Let's apply different easings to all of these right on the second, lets put something like easeInOutSine. And, on the third, lets put easeInOutBack. So, that's linear yeah. So you can see three different easings. Now, there're a bunch of them and they're documented or in the official documentation. You can check them out there. Now, something else that you can do that's really cool is to add specific property parameters, what does that mean? Well, let me show you, let's say that I want to animate all the circles, right? And let's say that I want different delays and durations for specific properties that I'm animating. Let's say I'm animating the background color to a specific value, but I want to have a very big delay before I do that. Well, I just pass in an object instead of an value, and then I set value here what is the value of the new background and also I can say delay 3000. So what that's gonna do is it's gonna wait three seconds before changing that background color. What if I wanna change something else? Let's move them down. So, I'm gonna do translate y, again, I'm gonna pass in an object. The value that I want is 500. But for these, I want a smaller delay, like 1000 milliseconds. And I also want to set a duration of 1500 milliseconds, right? That also works. So now, I'm gonna have a delay of 1,500 milliseconds, and let's, actually, Move this a bit up. So now 1,500 milliseconds, I get the translateY property animation. And 3,000 milliseconds delay I get the background color animation. And you can do it with a whole bunch of different properties as well. So let's say I wanna translate x as well. Value, let's put a relative value here. Let's say + = 100 and I want an even bigger delay on these. Let's say 5000, so now the resulting animation is something like this. Pretty cool right? So those were the property parameters. Now let me quickly show you the animation parameters. Now there are three parameters you need to learn, loop, direction and autoplay. Loop is basically a way of looping it. If you set it to true then the loop or the animation will go on forever. All right so that's gonna finish and it's gonna start all over again. If you set loop to a specific value, well, the animation is gonna loop that specific number of times. And if you just don't use it altogether, it's set to false by default, so the animation will not loop. For now let's just leave it at 1. Next is direction. Now direction, has two values or three values. Normal, which is by default. Then you have reverse, and reverse basically executes your animation in a reverse just like you can see here. And then we have alternate. Now alternate is very interesting watch what happens. So the animation executes normally, But then it goes back in a reverse order. So it doesn't just start from the end, and goes back, like the reverse value. Alternate actually finished the animation and goes back to the starting point. And finally, there is autoplay. And autoplay, by default, is set to true, but if you set it to false, it will not start the animation automatically when you open the page. Instead, you have to use some manual controls to start it. All right, so those are the basics of Anime JS. Of course, this isn't everything, there is a lot more to cover. But since this course is just an introduction, I think I showed you just enough so you can recreate the animation that you saw in the introduction video. And we're going to do that in the next lesson, see you there.

Back to the top