Create Self-Drawing Line Animation

In this tutorial I am going to show you how to make self-drawing svg line animation like this, using WPGraphicator WordPress plugin.

To get started, there are four steps to follow:

  • Draw an outline shape, with only stroke
  • Create a long dash that covers the length of the outline
  • Offset this dash to disappear from the path of the shape
  • Animate the dash to come back into view

Plus we need to work with two properties:

Create a new project. Go to your WordPress admin dashboard and navigate to WPGraphicator -> Add New.

Set the project size to width: 200, height: 200.

Set up project
Set up project

Step 1: Draw an outline shape, with only stroke

In this example we will draw a simple star shape which you can do easily, because you can find it in the editor’s shape library.

Select a shape from library
Select a shape from library.

Choose the shape and drag and move the cursor on the canvas. To keep aspect ratio, hold the ctrl key down while you are drawing. If you are ready press enter key to switch to select-mode and select your shape.

Open the stroke tab on the settings panel, and set an arbitary stroke width, in this example we set it to 5, and pick a color for stroke, for example: #ffff00 (yellow).

Set stroke width and stroke color
Set stroke width and stroke color.

Then in the fill tab set the fill color to transparent: rgba(0,0,0,0).

Your shape is ready. Lets animate it.

Step 2: Create a long dash that covers the length of the outline

To get a dash as long as the length of the stroke, we need an information about the stroke length. You can find it in the Information tab on the settings panel. Copy this value.

Get stroke length
Get stroke length.

Go back to stroke tab panel, and find the Stroke Dash Array property. Stroke dash arrays have 2-2 values. The odd values define the length of the dashes, and the even values define the gaps (empty spaces between dashes).

You can create complex dashes with this method, but we need only one pair of values for this example.

Click on ‘Add Value’ button and paste value of the stroke length both in the dashes, and gaps.

Set stroke dasharray
Set stroke dasharray.

Step 3: Offset this dash to disappear from the path of the shape

We can’t see any changes yet. The next step is that we will hide the stroke dash by moving it as much as its length. So add the stroke length value to the Stroke Dash Offset property as well.

Set stroke dashoffset
Set stroke dashoffset.

Step 4: Animate the dash to come back into view

And finally we will make animation for this stroke dash offset property to come back into view.

Move the playhead to the 0 second in the timeline, and click on the plus icon next to the ‘Stroke Dash Offset’ label. As you can see the first keyframe has been added to the animation.

Add keyframe to the timeline
Add keyframe to the timeline.

The next step is to reset the stroke dash offset at one of the next seconds to get the shape visible. Move the playhead to the second 2 for example, and set the stroke dash offset value back to 0.

Change value at second 2
Change value at second 2.

As you can see, the next keyframe point has been appeared. So our animation is done. It is that simple.

Alternatively you can change the duration of the animation by moving the second keyframe point in the timeline, or change its easing by double-clicking on the point.

Change default easing
Change default easing by double click on the keyframe point.
Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

1 × 1 =