How to Animate a Clipping Mask in SVGator
Learn how to add a clipping mask to your SVG in Illustrator and animate it in SVGator by following these steps
Now let’s get it straight — We all know that your SVG will be imported in SVGator just as you’ve created it in Adobe Illustrator or other SVG editing tool, right? Same name for elements, same layers, same order.
This means that you should plan ahead while creating the SVG file by imagining the final animation that you would like to export from SVGator. In this article, we will show you how we have created a magnifying glass effect with the help of a clipping mask in Illustrator.
- Preparing the file in Illustrator
Draw the text lines on a 300 x 300 px artboard, as shown in the image below. Select them all and use the “Unite” option from the “Pathfinder” panel to unite the shapes into a single object, then press ctrl+8 (or cmd+8 for Mac OS).
Don’t forget to rename the <Compound Path> to something relevant so you can easily recognize it in SVGator, such as “Text-Lines”, by double-clicking the object’s name in the Layers panel.
Draw the magnifier as shown in the image below and unite the handle and the circle into a single object, the same way you did for the “Text-Lines”.
Create and place a white circle inside the magnifier to cover the ”Text-Lines” object.
Now it’s time to draw some bigger text lines over the smaller ones. We will use them as the magnified version of the initial text lines. Unite the shapes into a single object, then rename it “Text-Lines-Magnified”.
Create a new circle (the green one in the image below) of the same size and position as “White-Circle”, and place it over the “Text-Lines-Magnified” object. This circle will be the mask, so rename it accordingly.
To create the clipping mask, select both “Mask” and “Text-Lines-Magnified”, then right-click and choose “Make Clipping Mask”.
If you did everything right, you should have the same results as shown in the image below.
Rename <Clip Group> to “Mask”.
Create a new circle (“Glass”) of the same size as the “Mask” and move it to the top in the Layers list, above all other objects. Make sure its position is the same as for “Mask”.
Use radial gradient to make it look like a lens. Set 0% opacity for white and 100% opacity for blue. Also use the blending mode “Multiply” from the “Transparency” panel, as in the image below.
Select everything except “Text-Lines” and press ctrl+G (or cmd+G) to make a new group with the selected objects, then rename it to “Magnifier-Group”.
Ready to export?!
Go to File → Export as… choose destination folder, select Format -> SVG. Check “Use Artboards” and click on the Export button.
Make sure you have the same settings in the SVG Options panel as in the image below, then click OK.
Congrats! You’ve exported the SVG. Now we can get to the fun part :)
2. Animating in SVGator
Import the SVG in SVGator. Find the “Magnifier-Group” in the Elements list and add it to the timeline by clicking on the add icon or use the shortcut Shift+A. Next, click on the transform origin option and make it centered, as shown in the image below:
With the “Magnifier-Group” selected, add Position from the Animators list (Shift+P). Double-click on the timeline duration and set it to 5 seconds instead of 3 seconds:
Now it’s time to add the first keyframe to the Position animator (just simply click on the blue rhombus icon or use the shortcut Alt+F) at 0 seconds and set the X input to -80.
Add two more keyframes: one at 2.5 seconds with the value of 10, 0 and one at 5 seconds with the value of -80, 0 (yes, just like the one at 0 seconds).
Click Play to preview the animation. Now the magnifier should move horizontally from left to right and back from right to left. The only thing left to be animated is the magnified text (lines) inside the circle.
From the Elements list, open “Magnifier-Group” group, “Mask-2” group, and “g_01” group. Select “Text-lines-Magnified” and simply press Shift+P. You’ve added both the element and the Position animator to the timeline.
Add the first Position keyframe at 0 seconds with the value of 90, 0.
Add the second keyframe at 2.5 seconds with the value of -50, 0 and the last keyframe at the end with the same value as the first keyframe, 90, 0.
Preview the animation. The magnifier should move seamlessly across the text lines.
To make it smoother, add the ease-in-out effect for both animators, as shown in the image below:
Select the export options by clicking on the Gear icon. In this case, we’ve selected Loop so our animation will loop forever after we’ve exported it from SVGator (top-right button or ctrl+E).
If you enjoyed this post, please click on the applause button to help other people find it. :)
Resources:
SVGator: https://www.svgator.com
Static SVG file: Download here
