How to Create an SVG Animation With SVGator

Duration: 09:11

If you are new to the world of animation and you've never used SVGator before, in this tutorial you will learn how to create a new project, explore the interface, and build your very first animation from scratch.

First, we opened a blank canvas and named the project. The main areas of the interface include layers on the left, tools at the top, and properties on the right. We used the shape tool to insert a circle and then adjusted its fill and stroke colors.

To prepare for the bounce, we moved the origin point to the top of the circle so the squash effect would look more natural. We animated its position to move down and back up, then added a scale animation to create a squish when it hit the ground.

We shortened the timeline to one second and enabled looping. We also showed how to copy styles using the eyedropper, group elements, and use helpful shortcuts to streamline the process.

Finally, we adjusted the canvas size and background color.

This technique can be extended to other illustrations, allowing you to replicate the process.

I hope you enjoyed this video and see you in the next one. Thanks for watching!


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

How to Animate an Element? | SVGator Help
Learn how to animate an element in SVGator. Get familiar with the most important tools of the tool.
How to Add Animated SVG to Your Website | SVGator Help
Learn how to add an animated SVG to your website! This tutorial will help you out, read the article and follow the required steps.