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:
- Stroke Dash Array – to create dashes on the path
- Stroke Dash Offset – to define where the dash of a stroke will begin
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.
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.
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).
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.
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.
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.
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.
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.
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.