Shape Animation Made Easy
Duration: 14:47
In this tutorial, we created a complete folder animation using morph and follow path animations in SVGator. We started by animating the position of a paper element so it moved to the center of the canvas after the folder disappeared. Then we applied a morph animation to the top part of the paper by converting it into a path and adjusting the nodes to create an unfolding effect.
To refine the animation, we added a scale animation to adjust the size and used fill color changes to unify the look of both paper parts. For the handwriting effect, we used stroke offset animation, matching the dash and offset values to the path length so the lines appeared to draw themselves. Alignment tools helped us evenly space the text lines for a clean layout.
Once the writing appeared, we used opacity animation to fade it out, making way for a checkmark. The checkmark scaled and moved to simulate a stamp effect, and then we reversed the paper’s unfolding using the same morph and fill techniques to fold it back up.
We wrapped up by exploring export options, choosing the right format for the web, and enabling infinite looping.
With these techniques, we built a smooth, reusable animation from start to finish.
Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.
