FREELessons: 5Length: 46 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 How to Animate Elements

The first thing you have to do when animating an element is to specify the target. That means providing a reference to an element, or elements (Anime.js can receive multiple targets).

We do this by using the targets property and supplying the correct value. Let’s see some examples.

2.2 How to Animate Elements

The first thing you have to do before animating an element is to specify a target. That means providing a reference, of some kind, to the object, or the objects, plural, that you want to animate. And I say plural because anime can work with multiple objects at the same time. So, you can achieve this by using the targets property, and then supplying a correct value. Let's see some examples. So I have a simple page with three divs, here, and I applied just some basic styling. Basically, we have three circle, s with a class circle, and each has an ID, first, second, third. Now I'm gonna call anime, and I'm gonna pass in an object. First, let's start with targets. You can target elements by using CSS selectors. Basically, the stuff that you would use in a style sheet to style your elements, you can use them here. For example, I can say I want to target all the elements with a class of circle. Well, in that case, I would just do this. Or let's say that I would like to target only the first element. Well, in that case, I would say targets first. Let's actually apply a transform here. I'm gonna say translateY. 300 pixels. So what this is gonna do is animate only the first element. If I were to use the first option, this would animate all the elements. Now, you can also use a DOM node, and a DOM node can be obtained by using query selector. So, you would pass in the document object, and you would use the query selector method. And you would pass in a CSS selector in here, for example, second, right? And that will target only the second element. You can also use a node list, and a node list is something you would get after using query selector all. So I'm gonna say targets, document, query selector all, let's say circle. This basically means select all the items with the class of circle. And that's gonna have the exact same effect as this. What's interesting about anime is the fact that it can accept a JavaScript array as a value for one of these properties. So, for example, lets say that I want to only animate the first and third circles. Well I would say targets, I would use an array, and I can do something like this. Document, query selector, let's say I want the first element. So, I'm using a DOM node, and for the second element, I'm going to use a simple CSS selector. Like for example, third. And this is a valid value. So now the first and third elements are animated. You should also note that JavaScript objects are a valid target, so you can animate properties of JavaScript objects. That's a bit more advanced. I'm not going to cover it here, but check out the documentation. You're gonna find some great examples there. Now, let's say you've determined what elements need to be animated. What kind of properties can you animate for those objects? Well, this is where you have a lot of freedom, because anime.js can animate anything, from CSS properties to SVG attribute. So let's see some examples. First of all CSS properties, right? Anything that's a CSS property can be animated. Think color, background color, border radius, font size, border color, anything. So just to give you a few examples, background color. Just be careful because background color in CSS has this form. But when you wanna use it in JavaScript, it becomes this. So lose the dashes, and use camelCase. So background color, let's say I want to use this bit. Make sure you use quotes when using color values. What else? Maybe border radius. Let's set it to 25%, for example. And what else? And then we have the translateY, which falls into transforms. And you can use scale, you can use rotate, let's actually use a scale here. Let's make these smaller, so we're gonna say 0.5. So with all of these applied, Our circles now behave like this. Yeah. So these two that I just selected will change the background color. Of course, in an animation, they will change the border radius, so instead of being circles they're now rectangles with the rounded corners. They also change their y value, so they will go down. And they'll also change their scale. They're gonna be smaller. You can also add rotate for example, or any kind of transforms. As I said you have a lot of freedom here. Now, what about DOM attributes? Well, turns out you can also animate DOM attributes. Let me show you a very simple example of that. On this page I have three elements, with a title and an input. Each one of them has that. I have some minimal styling applied to them, and as you can see, the input, each input has a starting value of zero, and they have some unique IDs. Weekly account, monthly account, and yearly account. Well using anime you can animate their values. Anime, targets, I'm gonna pass in weekly account, and then the property that I want to animate. In my case it's value. So we're animating this bit. And then I can put in the new value, which is a number, let's say 774. And also I can round up the result. So what that's gonna do is the following, watch this number here. Yeah, it's gonna animate it to that particular number. Well how many visitors do we have in a month, iff we have this many in a week? All right, well, we can approximate that, we can also do multiple calls for anime. Lets say that, on our monthly count, we have 674 visitors times 4. What about yearly? Well, we can do a yearly count, and that's gonna be 674 times 4 times 12, because we have 12 months. So now our visitor's page looks like this. And you can, of course, use certain properties to change the duration of this animation. But, in essence, it can also animate DOM attributes, just like you saw. Something else you can animate is SVG attributes, let's see an example of that. Let's say we have an SVG in the form of this arrow. I just created this really quick in Sketch. Now the code, I actually placed the SVG directly in my page. As you can see here it's created with sketch. And the essence of that SVG is this, the polygon. It has an ID of triangle and some points. And these points create the triangle that you just saw in the page. Well, what if I want to morph this particular arrow to be pointing up, instead of down? Well, that's also super easy to do. I just call anime for targets, I'm gonna pass in triangle, which is the ID of this polygon. And then I'm gonna animate the points. And the new points I'm gonna put in are 71, 0, 142, 56, 0, and 56. And I got these from the Sketch file, it's really, really easy. And I'm also gonna add a delay here, so you can see the effect little better. So now, I'm gonna refresh, yep, there we go. Let's see it again. So that's how you can morph to SVGs using anime. So those are the main types of things you can animate with this library. Now, I just wanna quickly talk about the units that you can use for the values, because so far, we've seen a couple. Let me just open the previous examples. So, we saw numbers. Unitless values, basically. We saw values with a specific unit, like for example, the border radius, that has 25%. We saw colors. And here I used a hex Format, but you can also use RGB, for example, or RGBA. And then there are two more types of values you can use, relative and function based. So let me show you a quick example on how to use those. So I have a page prepared here, which looks something like this, exactly the same as the first example. Now what I wanna do here is target all of my circles, so let's start there. And then I wanna change, let's say, the background color, and also apply a transformation. So let's say transforms. Now the relative values will basically add to, or subtract from, or multiply, the original value that was there. So there's a big difference between saying translateX: 100, this will set the x to 100, and saying this, +=100, this will add 100 to the original value of that property. So those are relative values. Now, function based values are very interesting, because you can do something like this. You can say translateY, I'm just using this property as an example, and you can specify a function, and that function can receive three parameters. The element itself, the element that's gonna be animated, I is the index, and L Is the length of the list of objects that are going to be animated. So in my case, L is going to be 3. So what you can do with this is say return, this is necessary and you need to return a value that is going to be used. So watch what happens if I say a return i * 100. Because this will go through all of the three circles, I'm gonna get the first i, which is zero, so that's gonna return a zero. On the second circle, it's gonna return 100, and on the third, it's gonna return 200. So that's gonna move these objects by a different amount. And you don't necessarily have to use these parameters, you can return whatever value you want. So, for example, if you want to add a different delay for each of the objects, you would say a simple function, and you would return number. Let's say anime random. This is a method for the anime object. Random between 0 and, let's say, 2,000. And for each of these objects, that's gonna generate a random delay. So, you saw this animation, and the next one will be different. Now the animations you've seen so far can be further customized by using property and animation parameters. And you're going to learn about those in the next lesson. See you there.

Back to the top