How to Animate an SVG Character

Duration: 10:38

In this tutorial, you will learn how to animate a cute coffee cup character that we created in the previous tutorial - How to Create an SVG Character. If you're interested in the static SVG creation, please check the first part of this series.

Step 1 - Organising Elements into Groups

Begin by grouping the character elements to simplify animation. Hide the coffee splash behind the cup by setting it to 0 degrees. Group all elements except the legs and shadow under the name "Body." Position the group's origin point at the center top of the cup for rotation. Group the legs separately as "Legs," with their origin at the center bottom.

Step 2 - Animating the Character's Body

Select the Body group and extend the timeline. Choose Rotate from the animation options. The Body group now appears in the timeline with a Position animator. Set the initial keyframe at 0 seconds with a rotation of 0 degrees. Move the playhead to 0.6 seconds and change the rotation to -10 degrees. Then, at 1.2 seconds, revert the rotation back to 10 degrees. This creates a back-and-forth rotation. Add a Position animator, move the Body down slightly at 0.3 seconds, and duplicate keyframes to match the rotation duration of 1.2 seconds.

Step 3 - Animating the Character's Legs

Select the Legs group and choose Skew from the animators list. Set the first keyframe at 0 seconds with a skew of 10 on the X-axis, aligning the legs with the body’s movement. At the next rotation keyframe, change the skew to -10, and then back to 10 for the third keyframe.

Step 4 - Animating the character's arms

Start with the right arm, setting the origin at the arm’s first joint. Add a Rotate animator, setting the initial keyframe at -25 degrees. At 0.6 seconds, rotate it to 50 degrees, and back to -25 degrees for the third keyframe. Repeat the process for the left arm.

Step 5 - Animating the Coffee

Select the coffee element behind the Body group. Use the "Rotate" animator and set the first keyframe to 15 degrees. At 0.6 seconds, set it to -15 degrees, and back to 15 degrees at 1.2 seconds. For the coffee drop, set the origin at the center top of the Body and adjust it similarly.

Step 6 - Adding Finishing Touches

Hide the grid and ruler. Set the timeline end to 1.2 seconds. Add easings to the animations: select all rotation keyframes for the body and apply the "Ease In Out Sine" easing. Apply the same easing to Position keyframes and the animations of arms and legs. For the coffee and drop, use "Ease In Out Cubic" easing. Adjust bezier handles if needed. Delay the coffee animation slightly by dragging its keyframes two milliseconds to the right. Ensure a seamless loop by duplicating the last keyframes to the beginning of the animation.

Step 7 - Exporting the Animation

Click the Export button and choose SVG. Set the iterations to "Infinite" and include the canvas color in the export. Refresh the preview to check changes. Export the animation, which downloads as a single animated SVG file. Open the file in a browser like Google Chrome to see the smooth, infinitely scalable animation.

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: