Animators and keyframes

In case you are new to SVGator, you should start with this topic to learn how to 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 here:

If you are a Trial 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:

* 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:

Please note that CSS animation type doesn’t support all animators. Please see the compatibility table here.

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:

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. You can read more about this here.

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