svg animation

Create a new SVG animation now!

New project

Create a Morph Animation

Duration: 05:37

In this tutorial you will learn how to create a morph animation by changing and animating an object's shape with the Node tool. This is the third part of our Getting Started tutorial.


You will find a written version of this tutorial below.


I will use this graphic icon to animate some spikes of the chart going up and down:

morph animation

I would like to bring the whole icon in the center of the canvas and make it bigger, so we can focus more on the morph animation. Also, I want the pencil icon in the folder to disappear so we can have the whole canvas available for the graphic icon. Let's start by selecting the element Folder front and move the origin point to the bottom center.  What I want to do is bring the origins of both folder elements to the same position. Select the folder back element and make sure you snap the origin to the bottom center of the folder front element:

morph animation

This is important for the scale animation that we're gonna create. Now drag the playhead on the timeline right about here, 1.8 seconds. Then add Scale, and the first keyframe was automatically added, right where the playhead was:

morph animation

Now let's set the duration of this scale animation and drag the playhead to 2.4 seconds, and scale down the element to 0. For that, I'm gonna use the Scale inputs and type in 0 for both X and Y-axis:

morph animation

We can now select both keyframes by clicking on the segment between them, right-click, and copy. Select the Folder front element and drag the playhead back to 0.8 seconds. Then choose Scale from the Animators' list. Now go to the keyframe at 1.8 seconds, right-click, and paste. Now we have the same scaling animation for both elements of the folder:

morph animation

We are going to do the same for the Pencil icon. Select the group Pencil icon, then add Scale. Actually, the Scale animator is already added, we used it before. Scroll down and here it is, right-click and paste. Let's take a look at the animation:

morph animation

You can see that the pencil icon will scale down to the center because its origin is centered.

Now let's start animating the graphic icon. With the Graphic group element selected, choose the Transform tool, and right from where the scaling for the other element starts, add another keyframe for Position. Then drag the play head to 2.4 seconds. Now I'm going to place our group in the center of the canvas using the Alignment tools:

morph animation

We have the position animation all set and now we do the same for scale. Add a keyframe at 1.8 seconds and drag the play head back to 2.4 seconds, then scale up to 1.8 for both X and Y-axis, which means 180%.

Let's take a look at the animation so far. As you can see there is some strange behavior going on right here. The short movement back and forth shouldn't be there. It's happening right between these two keyframes and is because of this handle control point over here. We just have to grab it and place it right at the origin's position. That handle appears there because of the curved path of the previous transition when the icon pops out of the folder, but this is how we can fix it. Now it stays in place between those 2 keyframes:

morph animation

Now that we have all in place, I'm going to animate this graphic using morph animation. Select the green line and the blue fill element right below it, and pick Morph from the Animators' list. The starting keyframes have been added and now let's drag the playhead to the 3 seconds mark:

morph animation

We need to select the Node tool. While having both elements selected hold click and drag over this point here. Select all the points in the position to move them together. Then drag them to set their new position and do the same for all the other points. Play around with their position until you get a whole new shape for the graphic:

morph animation

Let's take a quick look at the animation.

You can also hold Shift while dragging the playhead for a smoother preview. What I want to do now is to make the graphic turn to the same shape it had when it started. For that, what I need to do is select these 2 keyframes from the beginning, making sure that the play head is where I wanted it to be. Right-click and Duplicate. We duplicated the starting keyframes at the position of the play head:

morph animation

Let's see the whole animation now by fitting the canvas back into view, and play. That is how you create a basic morph animation in SVGator. I hope you liked this video. Thanks for watching it.


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