Stroke-Path Animation Explained
Duration: 05:43
In this tutorial, you will learn how to animate the Stroke Offset property in SVGator and how to create a self-drawing or self-erasing effect.
You will find a written version of this tutorial below.
In this video, I will show you how to create a simple stroke offset animation with the help of this download icon.
To use stroke animators make sure you have visible stroke paths. In this case, the sample that I've created is made entirely of lines. There are no elements with Fill color.
Let's start animating this first line of the arrow. Go to Animators and choose Stroke offset and Stroke dashes as well. You can also use the shortkeys indicated in the list as well. The first keyframes are automatically added to the current position in the timeline:
We have to set the values for these 2 keyframes, so we will go to the Stroke panel, and we'll use the Path length of our element. We'll need this value for the Stroke Offset and also for the Stroke Dashes. We can quickly add the length value to the Offset input by clicking on the Set-as-offset button. The value is added to the offset input:
And we will copy it in the Dashes input as well. Drag the play head to half a second. Then go back to the Stroke Offset input and set it back to zero:
Now let's jump back to zero and hit play for a quick preview. The line is drawing itself from the bottom to the top. But I actually wanted it to happen the other way around. I want the line to start at the top and go to the bottom. The quick and easy way to do that is to switch the position of the starting point with the position of the endpoint. We need to select the Node tool, so we can work with the points of the line:
Now drag the starting point up and the endpoint down, and snap it to the arrow. Adjust the position for the starting point to be centered and perfectly vertical. Alright, let's check the animation again. Now I have the result that I'm looking for.
I want the left and right lines of the arrow to animate the same way. And I want them to start from fourth tenths of a second right before the top line completes itself. So I'm going to select the left line of the arrow and add Stroke dashes and Stroke offset. Go to the Stroke properties, set the length as Offset, and also copy it into the Dashes input:
Drag the playhead to 0.9 seconds and set the Offset back to 0. You can also preview the animation by dragging the playhead over the timeline. As always, hold Shift while dragging to have a smoother preview. I would like this line to animate from inside out, so I'm not going to switch the starting point with the endpoint as I did previously.
Now I need to do the same thing with the right line. I'm going to select it, and press Shift+F and Shift+D to add the Offset and Dashes animators. Click and hold cmd for Mac or ctrl for Windows to select the 2 animators from the left line and copy-paste them to the right line starting from the 0.4-second mark:
We can see that the animation is symmetrical, that's because both lines have the same path length. If we were to paste this animation to another element with a different length the result wouldn't be the same.
Let's continue with the bottom line. Use Shift+F and Shift+D, go to the Stroke properties, set length as Offset and copy the length to the Dashes. I want this line to animate a little faster so I'll set a shorter distance to the second keyframe, 0.8 seconds will be fine. And I'll set the offset back to 0, and let's preview it. Actually, I think it's a bit too fast, so let me increase the distance a little, much better.
We're almost done. We only have to animate the last element, the circle. So select the circle, add the path animators, and repeat the processes, as usual, to get the self-drawing animation. Set the length for Offset and Dashes, and let's sync the duration with the end of previous animations 0.9 seconds:
Set the offset back to zero and let's check the animation. It feels like something is missing with the circle path animation, so I'm gonna add one last detail. Select the Transform tool and bring the origin to the center of the circle. It might snap to other elements that are invisible at this moment, so use this option to make sure it goes right into the center:
Now hold down Shift before clicking the rotate control, and rotate it 180 degrees. You can also check the degrees here in the rotation input:
Let's add the Rotate animator, Shift+R. Drag the playhead to 0.9 seconds and clockwise rotate another 180 degrees. Make sure you hold Shift before clicking. You can see in the input that we now have 1 turn, which means a complete rotation of 360 degrees:
Let's preview the final animation using the preview option up here. That looks great. That is how you can animate the Stroke offset property of an SVG path element. SVGator makes it easy. I hope you enjoyed this video. Thank you for watching.
Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.