How to Animate an SVG Character

Duration: 10:38

In this video, you'll learn how to animate an SVG character using SVGator. This video is the continuation of the one we have on How to Create an SVG Character.

We'll explain step by step how to animate the coffee-cup character, and how easy it is to set each element into motion using just a few basic animators.

So let's begin!

Step 1 - Organising the elements into groups

I’ll start with organizing my elements into groups, to make the animation process easier.

But first, I want to hide the coffee splash behind the cup. I’ll set it to exactly 0 degrees, there.

Next, I’m grouping all the elements of my character, except the legs and the shadow underneath. Let’s rename it “Body”.

Now that I have all those elements into a single group, I’ll be able to animate them all together. But before that, I’ll place the group’s origin point on the center top of the cup, so the group will rotate around it when animating.

I’ll do the same thing for the legs, and group them into a separate group and also name it “Legs”.

For this group, I’ll need the origin point placed at the center bottom. Great.

Step 2 - Animating the character's body

Now I’m ready to animate, and I’ll start with the Body group.

Let’s extend the timeline, and with the group selected, go to “Animate”, here, and choose Rotate from the list.

Now, the Body group appears in the timeline with the Position animator assigned. A default keyframe is added at the current playhead position, which, in this case, is at second 0, and it will mark the original state of the element I want to animate.

I will now go to the rotation inputs, here, and change the rotation value from 0 degrees to 10 degrees.

So the animation will start from this position of the character’s body. Now I have to drag the playhead further on the timeline, right about here, at 0.6 second.

Now I will go back to the Rotate properties and change it to -10 degrees.

The second keyframe automatically appears in the timeline at 0.6 second, where I placed the playhead, to mark this second state of my element.

Let’s drag the playhead another 6 milliseconds, here, at 1.2 seconds, where I want it to rotate back to its original state, from second 0.

So I’ll just type in 10 degrees again. And this is how the animation looks like. It rotates back and forward, from 10 to minus 10 degrees.

Next, I’ll add another animator to it, Position.

Then I’ll go at 0.3 seconds, right where the Body is perfectly vertical, and move it down a little, to create a bouncing motion for the character. There.

Of course, as for the rotate animation I did before, I want it to move back up, here, when the animation reaches 0,6 seconds.

To do this easier, I can click the first keyframe, and hit Control D or Command D on my keyboard to duplicate the selected keyframe at the playhead’s position on the timeline. Like this.

Now I have to repeat this Position motion to make it match the duration of the Rotate animation, of 1.2 seconds

For that, I’ll select all my Position keyframes, just like this, and duplicate them, starting with the first one at 0.6 seconds. Basically, I doubled the initial position animation to repeat once.

Step 3 - Animating the character's legs

Now I also need to animate the legs, and sync them to the Body motion.

So with the playhead at 0 second, I’ll select the Legs group, and choose Skew from the animators list. Good.

For the first keyframe, I’ll go to the Skew inputs and type in 10 for the X axis.

You can see that the legs are now inclined towards the way the body moves, giving the character natural posture.

Now let’s go to the next Rotation keyframe, right here where the body is all the way in the opposite direction, go back to the Skew properties, and type in -10.

And for the 3rd keyframe, I’ll type 10 again, as I did for the first one.

The whole motion looks better now, and our character is doing a simple, happy dance.

Step 4 - Animating the character's arms

I still have to animate the arms. I’ll start with the right arm, which is here, in the Body group.

I need to place the origin at the arms first joint ( the Snap to Grid is giving me a little trouble here, so let me disable it) now I can place it right where I want it. There.

Starting from second 0, I’ll add the Rotate animator, and rotate the arm - 25 degrees.

Now let’s go half way of our animation, at 0.6, and rotate it in the other way around. 50 degrees will do just fine.

And the third keyframe, of course, -25 degrees again.

Let’s have a quick look at it. Nice. Looks good.

I’ll now repeat the same process for the other arm real quick.

Select it from the Body group, place the Origin, add the Rotate animator, and I’ll set the keyframes exactly the way I did it before.

Let’s take another look, great!

I just want to make a little adjustment to the Body animation. I’ll select the Position keyframe where it moves down, and I’ll drag it a little bit more.

I’ll keep the keyframe selected, and move the playhead to the 4th keyframe, and hit Command D to duplicate.

Step 5 - Animating the coffee

We’re almost done. The last to animate is the coffee, here, behind the Body.

I’ll use the Rotate animator, and set the first keyframe with a rotation of 15 degrees.

Then at the 0.6 second I’ll go with -15 degrees, to have the coffee element rotate in the opposite direction.

And of course, 15 degrees again for the 3rd keyframe.

Let’s not forget the Drop. It should have the Origin point placed on the center top of the Body, exactly like the Coffee element’s origin.

With the playhead at 0.6, I’ll freely rotate it on the other side, just above the splash, here.

Now I just need to copy the first keyframe at the end.

Let’s take a look at it. Great! We can consider the animation done at this point.

Step 6 - Adding finishing touches

But before exporting it, I would like to do some fine tuning for the timing.

First, I’ll hide the grid and ruler from the stage, from this button, here.

Now I’ll drag the timeline end at 1.2 seconds, right where all my last keyframes are.

Let’s hit play from the beginning.

What I wanna do is to add some easings and create a little delay here, for the coffee drop. I’ll grab the timeline from here, and extend it a little so I can see more of my keyframes.

And by holding down the scroll wheel on my mouse, I’m using the hand tool which allows me to pan into the stage.

Now let’s scroll down to the Rotate animation keyframes of the body, and select them all.

I’ll set an easing for the rotation of the body. To do so, I must go here, on the easing options. From the easing presets list, I’m choosing “Ease In Out Sine”.

And it will apply to all the keyframes that have been selected.

Actually, I’ll use the same easing for all the Position keyframes as well.

Next, I’ll select the animations from the arms and legs, just like this. Go back to the Easing panel, and add the same easing for all of them at once.

Now the last two elements, the coffee and the Drop. I’ll select the keyframes from both of them, and this time I’ll choose a different easing function. I’ll go with “Ease in Out Cubic”.

You can see how this function has a different curve, which you can customize by adjusting the bezier handles, and create a new custom easing function. For now, it is good enough as it is, so I won’t edit it.

Let’s take another look. And finally, I’ll make the last adjustment: I’ll add a little delay for the coffee sloshing inside the cup, which now is perfectly synchronized with the cup’s motion.

I’ll select all the keyframes for the Coffee and the Drop again, and drag them two milliseconds to the right.

Now let’s see how it looks. I think it’s way better now, that all these 6 keyframes have a different timing than all the other ones.

Now I have to set the new ending keyframes. For that I just need to click on the “Add Keyframe” button, here. And also for the Drop element.

In order to have a seamless looping animation, I have to duplicate the last keyframes, those which I dragged away, at the beginning of the animation.

Select the keyframe to be copied, and press control, or command D, at second 0.

Let’s hit Play.

And there it is. Our animation looks good, and it’s ready to be exported.

Step 7 - Exporting the animation

I’ll go to the Export button here, and choose SVG.

From the export settings panel I’ll go to Iterations, and choose “Infinite”.

Then scroll down a little to the Canvas Color options, and check “Include in export”.

To see the changes I’ve made, I need to click here, on the Refresh preview button.

And here’s our animation of a dancing coffee-cup character! I’ll just have to click export, and we’re all done!

The animation is instantly downloaded. I’ll find it in my Downloads folder as a single animated SVG file.

Let’s see how it looks if I open it in the browser. I’ll open it in Google Chrome.

It runs nice and smooth, on an infinite loop. And because it is an SVG, it can be scaled indefinitely without losing any quality.

I hope you enjoyed this tutorial and had a nice learning experience!

Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!

Related tutorials to help you out: