Animators and keyframes

In case you are new to SVGator, you should start by learning how to animate an element to become familiar with how you can add animators and keyframes to the timeline.

You must have at least one element selected on the canvas to see the list of the animators. You will find the list by clicking the Animate button:

animators keyframes
Click on the animate button to animate an element

Alternatively, you can also right-click on the element and go to the Animate category.

animators keyframes
You can also right click in the stage to animate an element

If you are a Free user, you can use all animators from the list, but upon exporting the file it will be saved with the basic features only. You can learn more about the premium features on our Pricing page.

You can find the properties of each animator in the corresponding panel from the right sidebar:

AnimatorsRight sidebar
Fill colorFill
Fill opacity
Stroke colorStroke
Stroke opacity
Stroke width
Stroke offset
Stroke dashes
Corner radius**

* For path elements only
**For rectangles only

Using the inputs from the right sidebar you can set more precise values for your animations.

For example, if you add a Scale animator, you can also edit the values for the animation in the Transform panel. In case you’ve selected the Filters animator, you will have to add the filter type in the corresponding panel:

animators keyframes
Add filters to the properties panel

Please note that CSS animation type doesn’t support all animators. Please consult our SVG compatibility table to learn more.

All animations are defined by keyframes on the timeline, representing starting and ending points. You can drag them one by one or as a group to change the timing of the animation. You can also copy, paste, duplicate, or even reverse them:

animators keyframes
Right click keyframes to access options

Please note that you can’t copy keyframes from a certain type of animator to a different one. For example, if you’ve copied keyframes from the Rotate animator, you can’t paste them to Position or Skew, only to Rotate. Copying keyframes will not work for the Morph animator, as the number of nodes can differ from element to element.

You can set a different easing effect for each keyframe. Read our documentation to find out how to add ease effects.

With certain animators you can achieve more. For example, you can use the Position animator to animate SVG along path. You can watch our tutorial on how to create a follow-path animation here.

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