How to Animate a Clipping Mask

In this tutorial, you will learn how to create and animate a group of masks. In this case, a dragonfly is used as a mask for the floral pattern as you can see in the animation.  

You will find a written version of this tutorial below.

Here is the project I've prepared for this tutorial. I will show you the elements' list first. I have this first group “Dragonfly” consisting of other subfolders to help me keep things more organized: head, body, and so on. All the elements are white because I don't really need them to have any color if I'm going to use them as masks.

Let's open the “Body” folder here. Here is the body of my dragonfly and “wing 1”,  “wing 2” for the right side, and again “Wing 1” and “Wing 2” for the left side.

Let's close those groups for now.

The next group is the floral pattern that will be a mask. Let's make it visible. I already have it animated to save us both a little bit of time. I used just a few simple rotation animations for some of the flowers. I will hide the pattern for now.

Next, I have this “Background Details'' group above a dark background rectangle that will be the last element of this animation. You might be wondering why the pattern group's name is underlined. That's because it's a “Clip path group”. The floral pattern is placed into a rectangular clip. This here is the group containing all the details of the pattern and the arrow symbol indicating up shows us that is being clipped by the clipping paths group above it.

The clipping group contains the rectangle that was converted to a clip-path, this one here, named “Bg” that stands for background. The clip can be readjusted or animated as well, as you’d animate any other element. I'll leave it as it is. I'm going to undo the scale and close these groups.

This is my project so far and I will set the dragonfly as a mask for the pattern.  The element that will become a mask must be on top of the one that will be masked. With both selected, right-click, then choose "Create mask".

The dragonfly group became a mask for the floral pattern. This action placed the group pattern underneath a new group named “Masks” which is also inside the main group named “Mask group”. You can rename as you wish. The masks groups will keep all the elements of the dragonfly as they were without merging them into a single path.

This will allow you to animate each element individually while also masking the group I chose to be masked. I can move this wing around and see the mask group through it. I will undo this move now.  I would like to make the “Background Details” group visible again.

I will animate the wings. Let's start with these two on the right. To save some time again I will delete the other two wings from the left side and duplicate the ones from the right after I'm done animating them.  

I'll start with "Wing 1". Unlike a simple clipping path, masks have the advantage of controlling the transparency of the mask element. The color white will make the mask element 100% clear, while black will make it transparent. I will use a linear gradient between black and white to demonstrate this. I will adjust the angle, making it almost vertical here. And as you can see, the black side of the gradient will make the mask floral pattern transparent. You can see the dark background through it, while the white one keeps it 100% visible. This is how you obtain an opacity gradient using a mask.

I'm will do the next thing for "Wing 2" now. It will kinda create the illusion that the first wing is on top of the second one or at least it doesn't make it look that flat. I think it's more interesting using these opacity gradients.

It's time to animate the wings and I’ll go with a rotate animation. Click on "Rotate". I'm dragging the playhead to the first tenth of a second and rotate the wing counterclockwise.

I will now duplicate the first keyframe with the initial angle at the third tenth of a second. Use Ctrl+D to do that or Cmd+D if you are using a Mac. I have to duplicate the rotation keyframes along the timeline, but I'll fast forward through all of that because I'm going to do the same thing for the other wing as well. This is how the animation of the wings looks.

I'll also like to add an easing effect to them. I already have these 3 custom ones ready. I'll go with this one and make a little adjustement.

I need two more wings for the dragonfly on its left side. So I'll group the wings I just animated, select both, right-click, and group. First, I need to place the origin point in the middle of the body, so it will flip in the right place.

Right-click on the group and duplicate. I'm going to rename the groups real quick just to keep things organized, “Wings left”. Now I'll use this option here to flip it. And also rename this group “Wings right”. As you can see, the wings were copied keeping the animation I've made.  

Now I'll set the animation to run on an infinite loop. Go to "Preview settings" and I'll choose my animation to start on click. I can also choose what happens on the second click.  It can pause, restart,  play on reverse or simply continue. I'll go with pause on the second click. I would also like my SVG to have a fixed size.

Now let's preview it. I have to click on it to start. This is the movement of the wings and there is one more thing left that I would like to do.

I want to animate the position of the dragonfly to make it look like it's flying across the scene. For that, I'll need to add the "Position animator" to the "Dragonfly" group.  Drag it out of the canvas to set its starting point. Drag the playhead to the end of the animation, then move the dragonfly all the way across the canvas. I'll also want to bend its path a little.  

The dragonfly should orient along the path.  For that, I'll enable this option here, "Autorotate". It just needs a little more adjustment. I'll rotate it just like this. I need to drag it a little more out of the canvas.

Let's drag the playhead to preview it. Seems to be fine. Let's also click on "Preview" and click to start. We have the dragonfly flying across the stage while it’s masking the floral pattern group that also has a few animated elements. I can also click again to pause the animation and then click it again to resume it. I hope you enjoyed this tutorial and I hope you found it entertaining and helpful.

Thanks for watching!

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

Next tutorial: How to Use the Step-End or the Step-Start Timing Function