Animate SVG Character | SVGator

Описание: Learn how to animate a cute coffee cup character that we created in the previous tutorial.
Start animating: https://www.svgator.com

If you're interested in the static SVG creation, please check the first part of this series.

00:17 Organizing the elements into groups
00:24 Animating the character's body
03:15 Animating the character's legs
04:03 Animating the character's arms
05:20 Animating the coffee
06:43 Adding finishing touches
09:43 Exporting the animation

Step 1: Organizing 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 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 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 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.


Subscribe:    / @svgator  

Let's connect:
Facebook:   / svgator  
Instagram:   / svgatorapp  
Twitter:   / svgatorapp  
LinkedIn:   / svgator  

SVGator | Web-based Animation Tool 🎨 Animate SVG, Lottie, GIF & Video⚡Create lightweight animations with an intuitive and beginner-friendly design tool.