Shape Animation Made Easy
Duration: 05:37
In this tutorial, you will learn how to create a shape animation in SVGator. 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:
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 shape animation. Also, I want the pencil icon in the folder to disappear so we can have the whole canvas available for the graphic icon, then we can move on to animate the shape.
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:
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:
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:
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:
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:
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:
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:
Now that we have all in place, I'm going to create a shape 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:
We will use the Node tool to change the element's shape. 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:
Let's take a quick look at the shape 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 playhead:
Let's see the whole animation now by fitting the canvas back into view, and play. That is how you create a basic shape 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.