svg animation

Change the element’s origin point

To see the element’s (or group's) origin point, select the Transform tool:

By default, each element’s origin point is positioned at 0 X 0 Y. If you want to change the position of the origin point, you can drag it with your mouse or you can use the Anchor inputs in the Transform panel from the right sidebar:

Setting different positions for the origin point will generate different results with Transform animators like Position, Scale, Rotate or Skew.

Because it’s a lot easier to start working on an animation when the origin point is centered, we’ve added an icon for this in the top right side of the application. Alternatively, you can also use the shift + cmd/ctrl + O shortcut:

Animating the origin point

Select an element on the canvas and click on the Animators list on the timeline to add the Anchor animator. You can also use the shift + A shortcut. You will notice that the element has been added to the timeline with the Anchor animator and the first keyframe right where the playhead is positioned:

Next, move the playhead to the next second and change the origin point’s position. A second keyframe will be automatically added where the playhead is. Click on the preview button to see the animation and repeat these steps to continue your project.

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