Animate an element

Once you’ve started a new project and you have at least one element visible on the canvas, you can start learning how to make an animation.

Before you would add an animator, it’s a good idea to check the origin point's position. By default, the origin point is usually centered. If you imported a file where the origin point isn't centered, simply select the element and use the shift + cmd/ctrl + O shortcut. You can always change it later.

Now, let’s get a bit familiar with the three most important tools:

animate SVG
Animate SVG elements with the Transform tool

Transform - meant to change Transform properties like Position, Anchor, Scale, Skew, or Rotate. You can also reposition the anchor point with the Transform tool.

Node - use this tool to select and drag the nodes of a path element or to adjust beziers.

Resize - use this tool to select elements on the canvas, move them to a new position, or change their size without actually transforming the element.

To make things easy in this case, we will use a simple Rotate animator, but you can find plenty of information about other animators on our Help center.

You can add an animator by selecting the element and opening the Animators list. You will find this here:

animate SVG
Click on Animate and choose Rotate

In this case, simply click on the Rotate animator. Alternatively, you can also use the cmd/ctrl + R shortcut or you can right-click on the element and go to the Animate category.

animate SVG
You can also right-click to access the available animators

The element will be automatically added to the timeline with the first keyframe right where the playhead is positioned on the timeline:

animate SVG
The first keyframe gets added where the playhead is

Now, move the playhead to the next second and select the Transform tool. Hold and rotate any corner of the bounding box. Alternatively, you can also use the Rotate inputs from the Transform panel:

animate SVG
Move the playhead, and rotate the element to add the second keyframe automatically.

As you can see, a new keyframe has been added to the timeline.

Hit play to see the animation and repeat these steps to continue your project.

More articles:

How to Change an Element’s Origin Point? | SVGator Help
Find how to change an element’s origin point with the Transform tool. You can drag the origin point to a new position with your mouse. Try now!
How to Add Ease Effects? | SVGator Help
Learn how to add ease effects using SVGator! This tutorial will help you out, read the article and follow the required steps.
How to Change Keyframe Values? | SVGator Help
Learn how to change keyframe values in SVGator. You can start adding keyframes after you’ve added at least one element and one animator to the timeline. Keyframe values are different for each animator.

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