![]() 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.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |