svg animation

Create a path animation

First, make sure you use the Path animator for elements with visible stroke-paths. This animator will not work for elements that have fill color only and no visible stroke-paths.

Download SVG sample

svg animation


svg animation

The path animator has two properties: Offset and Dashes.
The Offset property will define the location along a path where your array of dashes will begin.

Animating a self drawing path:

  • Use the length of the path (385.35 in this case) for the starting keyframes, as in the image below.

svg animation

  • Set the end keyframe and use 0 for offset, as in the image below:

svg animation

The animation should look like this:

svg animation

Animating a self erasing path:

  • Use the double of length (770.7 in this case) for the first Offset keyframe, and the length (385.35 in this case) for Dashes, as in the image below.
  • The second Offset keyframe must have the length value (385.35 in this case)

svg animation

Another way is to use negative values for Offset keyframes, for example -385.55 for the firsft keyframe and 0 for the second one.

*Negative values for offset will cause animation issues in Safari.
We recommend setting up the path animation using only positive values.

The animation should look like this:



svg animation

Animating a self draw-erase path:

  • Use the triple of the length (1156.05 in this case) for the first Offset keyframe, the double of length (770.7 in this case) for the second keyframe, and the length of 385.35 for the 3rd keyframe.
  • The Dashes keyframe will remain the same (385.35)

svg animation

Notice that at the first keyframe, the path didn’t completely disappear. Sometimes erros like this might occur, but it can be fixed by increasing or decreasing the value with one unit. In this case, the first keyframe value must be adjusted to 1157.05 instead of 1156.05.

Download SVG sample



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