Animate SVG Character SVGator

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=T-Bb03-aiF8

Welcome to our channel. These tutorials are for SVGator - the most advanced SVG animation creator: https://www.svgator.com • In this tutorial, you will learn how to animate a cute coffee cup character that we created in the previous tutorial. 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 is an online SVG (Scalable Vector Graphics) animation creator.

#############################

New on site