Reverse Offset Direction

Duration: 00:45

In some cases, you might want to change the path animation's direction from left to right or from right to left. You can easily achieve that by changing the Offset's value. Watch this tutorial to see how.

The path around this shield icon is animated to draw itself using the Offset animator and its length value for the dashes' input.

path animation reverse direction

The line starts animating clockwise but I want to animate it counterclockwise. To make it draw itself the other way around, I have to change the direction for the Offset animation.

To do so, drag the playhead at the second keyframe, click on the Set as offset button, then double the Offset value by using this multiply button here and multiply by 2:

line animation reverse path

Now you can see that the offset changed its direction, and the line will draw itself the other way around.


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

Create a path animation

Stroke-Path Animation Explained