How to Create Morph Animation

Duration: 07:37

In this  tutorial you can learn how to create a morph animation.

Here's a detailed description of how to create a morph animation from a circle to a location pin and finally to a heart, incorporating additional animations and easing effects for a more dynamic result.

Step 1 - Start with an Ellipse element

Begin with a circle, which is an ellipse element in SVG.

Convert the ellipse into a path element by right-clicking on it and selecting "Convert to Path". This allows for more complex shape manipulation.

Step 2 - Edit Path Nodes

To morph the shape, you need to edit its nodes. Access the node tool by selecting it from the tools menu or by pressing "A" on the keyboard.

Enable the snapping options and snap to grid to ensure precise movements.

Step 3 - Create Keyframes for Morph Animation

Move the playhead to the 0.4-second mark and select "Morph" from the animator's list to add the first keyframe, marking the initial state of the path.

Drag the playhead to 1 second and add another keyframe. This marks the next state of the path.

Step 4 - Modify the Path

To transform the circle into a location pin, select three nodes and move them up by one grid unit. Move the bottom node down by one grid unit.

Change the node type to make the bottom point sharp instead of curved by selecting "Straight" from the node type options.

Adjust the side nodes to make the shape smoother, ensuring they have the same node type (mirrored) and adjusting the handles for symmetrical curves.

Step 5 - Add More Elements

At the 0.8-second mark, select the ellipse tool, turn off snapping, and draw a circle within the location pin. Use the color picker to match the color and align it centrally.

Step 6 - Incorporate Scale Animation

From the animator list, select "Scale" and set the initial scale to zero. Move the playhead to 1.2 seconds and set the scale back to one.

Step 7 - Combine Morph and Rotate Animations

Start the rotate animation at 2 seconds. Select "Rotate" from the animator's list and rotate the path 180 degrees by holding down the shift key for precision.

Hide the circle temporarily to focus on the path.

Step 8 - Refine the Shape

At the 2.3-second mark, add another morph keyframe and start reshaping the path into a heart. Use the node tool to adjust nodes and ensure symmetry, turning on snapping if needed.

Carefully tweak each node and handle to perfect the heart shape.

Step 9 - Add Heartbeat Effect

Create a heartbeat effect by adding another morph keyframe 3 milliseconds after the heart is formed. Move nodes slightly to make the heart larger.

Duplicate the previous keyframe at the end to complete the heartbeat cycle.

Step 10 - Wrap Up and Add Easing Effects

Finish the circle animation by scaling it back to zero when the location pin starts transforming into the heart.

Duplicate and reverse keyframes to create a smooth scaling transition. Adjust the timing and speed of the initial animation.

Apply easing effects to the animations for a more natural look. Use the easing panel to select and customize presets, ensuring a smooth and engaging transition.

Step 11 - Final Review

Play through the animation to ensure all transitions are smooth and the shapes morph correctly.

Fine-tune any remaining details, such as node positions and easing curves, to enhance the overall animation quality.

Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!


Related tutorials to help you out:

How to Change the Easing Function | SVGator Tutorial
There are several easing functions that you can choose from. If you need something different, you can also create a custom one. Get started now!
Shape Animation Made Easy - Learn Now | SVGator Tutorial
You can change and animate any element’s shape with SVGator. Learn how to create this effect in less than 10 minutes. Watch our tutorial and get started!