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: I'm going to select it, and press Shift+F and Shift+D to add the Offset and Dashes animators. Now I need to do the same thing with the right line. 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. As always, hold Shift while dragging to have a smoother preview. You can also preview the animation by dragging the playhead over the timeline. Go to the Stroke properties, set the length as Offset, and also copy it into the Dashes input:ĭrag the playhead to 0.9 seconds and set the Offset back to 0. So I'm going to select the left line of the arrow and add Stroke dashes and Stroke offset. And I want them to start from fourth tenths of a second right before the top line completes itself. I want the left and right lines of the arrow to animate the same way.

Now I have the result that I'm looking for. Alright, let's check the animation again. Adjust the position for the starting point to be centered and perfectly vertical. Now drag the starting point up and the endpoint down, and snap it to the arrow. We need to select the Node tool, so we can work with the points of the line: The quick and easy way to do that is to switch the position of the starting point with the position of the endpoint. I want the line to start at the top and go to the bottom. But I actually wanted it to happen the other way around. The line is drawing itself from the bottom to the top. Now let's jump back to zero and hit play for a quick preview. Then go back to the Stroke Offset input and set it back to zero: The value is added to the offset input:Īnd we will copy it in the Dashes input as well.

We can quickly add the length value to the Offset input by clicking on the Set-as-offset button.

We'll need this value for the Stroke Offset and also for the Stroke Dashes. 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. The first keyframes are automatically added to the current position in the timeline: You can also use the shortkeys indicated in the list as well. Go to Animators and choose Stroke offset and Stroke dashes as well. Let's start animating this first line of the arrow. In this case, the sample that I've created is made entirely of lines. To use stroke animators make sure you have visible stroke paths. In this video, I will show you how to create a simple stroke offset animation with the help of this download icon. You will find a written version of this tutorial below. 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.

Animate stroke after effects