Create Morph Animation

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:

  1. 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.
  2. 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.

Set size of project
Set size of project.

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.

Snap to grid
Snap to grid.

Step 2: Draw a simple diamond, using ‘Draw Path’ tool

Go to the Toolbar and select the ‘Draw Path’ tool.

Select 'Draw Path' tool
Select ‘Draw Path’ tool.

Try to draw on the canvas something like this:

Draw a simple diamond
Draw a simple diamond.

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.

Add 'path' property to the timeline
Add ‘path’ property to the timeline.

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.

Select 'Edit Path' tool, and move the playhead
Select ‘Edit Path’ tool, and move the playhead.

Try moving the position of nodes, and control points by dragging them with your cursor as shown below.

Move nodes and control points
Move nodes and control points.

And finally play the animation to see how your drawing change its shape.

Spread the love

Leave a Comment

Your email address will not be published.

4 × 5 =