Combine Shape Animation With a Self-Drawing Effect

In this tutorial, you will learn how to combine stroke-path animations with morph animations, how to set a custom starting point for the stroke offset and how to export the animation to play back and forth without using more keyframes.

Download the sample from https://www.svgator.com/assets/shield-stroke.svg

You will find a written version of this tutorial below.

In this tutorial, I'm will show you how to animate an element's shape and combine this animation with a self-drawing effect, how to set a custom starting point for the stroke offset, and also how to export the animation to play back and forward without using more keyframes for that.

I’ll show you real quick how I prepared the SVG in Illustrator, where I've also created a grid with the unit of 10 by 10 pixels so it will help me work more precisely. I also want my starting point for the offset animation here at the center of the top horizontal line. Using the pin tool I will add 3 points here on the first line, the second one, and the third one, which I will now delete to break the line. Now I have to place this point on top of the other one. Just like this, good.

I can now delete the lines that I used as a grid. I also want to make the stroke a little wider, 10 will do this just fine. Let's take our shield to SVGator.

First, let's turn the grids on. From the Snapping options, make sure you have Snap to Grid On. Now I'm going to use the Node tool and choose Morph from the animators list. Drag the playhead to 0.5 seconds. Start dragging and arranging the points to create a new shape, the shape of a crown.

I'm gonna fast forward to this process just to save us both a little bit of time. I'm almost done, I just want to make sure everything is symmetrical.

Now, drag the playhead back to 0 and add the Stroke Offset animator. A good thing to do is to disable the shape animation for the moment while working on the stroke path animation. Now let's go and set the Path length as Offset and use the multiply option to double the value for the offset. Copy the Path length to the Dashes. Drag the playhead to 0.5 seconds and use the Path length for offset. Drag the playhead another half a second and type 0 in the Offset input.

Enable the shape animation. Let's see how this animation looks like. You can see that the stroke won't go all the way to the top of the crown. That's because the Path is longer now.

You see how the length changes while the shape is morphing. To fix this we need to drag the playhead to 0.5 seconds and add the Stroke Dashes animator. Then at 1-second copy the path length to the dashes input, there. I'm going to adjust some timing now by dragging around a few of the keyframes here. I wanted to start to animate the shape before the stroke offset starts growing for the second time. Let’s drag these two in the same position with the morph keyframe.

I will now duplicate the path and rename the duplicate 1, the one from above, call it Stroke, by double-clicking on its name, and type in Stroke. I also rename the other one Fill.

With the Fill object selected I'll go to the stroke properties and disable the stroke.

And I'll set a Fill color, let's go with yellow. I like yellow. And I want to detach the fill element by moving it a little like this. Let me disable the snapping options and adjust it a little bit more, perfect.

The Stroke could also use a color other than black. So let’s try a dark blue instead. Ok, now let’s see the animation.

One more thing I want to do here is to animate the opacity of the fill element. Let's expand the timeline height just a little bit. And now add the opacity animator, and see where to set up the first keyframe. Actually, before that, I will select all the keyframes and drag them a little so the first one will start at 0.3 seconds. Drag the Opacity keyframe as well, and somewhere around here about 0.6 seconds, I'll set the opacity to 0. Next, go to  0.9 seconds, and duplicate the keyframe with 0 percent opacity and 1.2 seconds the one with 100 percent opacity.

Now let's hit Play. 3 seconds is way too much time for this animation, so I will set the duration for 1.4 seconds. I will also want it to play on a loop so for that I'll check Infinite here. To make the animation play back and forward I'll select Alternate as Direction.

Now let's preview it. And here it is, playing on loop back and forward like a boomerang effect, a simple example of how to combine a shape animation with a self-drawing effect.

Be sure to check out our other SVGator tutorial videos. Thanks for watching.

More articles:

Advanced morph animation tutorial

Create a morph animation

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