Morphing is a special effect in animation that changes one shape into another one through a seamless transition.
In this tutorial we are going to make a very easy morph animation with WPGraphicator WordPress plugin. So we are going to draw a simple diamond, and then change this into a heart.
Before we start, there are two important things you have to know about morph animation:
- You can make morph animations only for path, or polyline elements in svg. So if you create a morph animation, you are actually changing the ‘d’ attribute of the path svg element, or in case of polyline you are changing the ‘points’ attribute.
- The shapes need to have the same number of points, otherwise the animation will just fail. That is why you can’t add, or remove new nodes to the shape after you have drawn it in WPGraphicator.
So lets get started:
Step 1: Set up project
Go to the WordPress admin dashboard, and create a new WPGraphicator project.
Open the ‘Project’ tab at the settings bar, and set project size to 80*80. We got a 8*8 grid, that helps us to get appropriate position of nodes of the path.
Navigate to the ‘View’ item at the topbar menu, and choose ‘Snap to Grid’ option, or you can use Ctrl + G shortcuts as well. This option allows us to jump nodes to the exact position on the canvas while you are drawing.
Step 2: Draw a simple diamond, using ‘Draw Path’ tool
Go to the Toolbar and select the ‘Draw Path’ tool.
Try to draw on the canvas something like this:
If you are ready, don’t forget to press enter key, or choose ‘Select Mode’ at the toolbar to finalize your shape.
Step 3: Add the first keyframe to the timeline
Open the ‘Path’ tab in the settings panel, and click on the ‘plus’ icon next to the ‘Path’ label.
As you can see the first keyframe has been added to the timeline.
Step 4: Change form of the diamond into a heart
Select ‘Edit Path’ tool on the toolbar, and move the playhead to the next second.
Try moving the position of nodes, and control points by dragging them with your cursor as shown below.
And finally play the animation to see how your drawing change its shape.