svg animation

Animate an element

First, choose the element that you would like to animate by selecting it on the stage or by clicking on its name in the Elements list. You can add it to the timeline by clicking on the ‘Plus’ sign or by double-clicking near its name. You can also add it to the timeline by using the Shift + A shortcut.

svg animation

Next, add an animator to your element. There are five animators: Path, Position, Rotate, Scale, and Opacity. Please note that Path isn’t available to Trial users.

svg animation

You can add the animator to the element by clicking on the ‘Plus’ sign or by selecting an element and using the animator’s shortcut. They are the following:



  Animator   Shortcut
Opacity Shift + O
Position Shift + P
Rotate Shift + R
Scale Shift + S
Path Shift + T


After you’ve added an animator to your element, the next step is to add keyframes to the timeline. By clicking on the blue rhombus that’s next to the animator you will place a keyframe right where the handlebar is. Move the handlebar and place another keyframe (Alt + F).

Change the keyframe values by clicking on the input next to the animator. Read more about changing keyframe values here.  You can drag the keyframes to adjust the timing of your animation.

svg animation



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