Are you looking to add some eye-catching animation to your SVG drawings? One way to do this is by using the Scale transform. In this tutorial, we’ll walk you through how to perform an infinite loop zoom animation on an SVG drawing using SVG ANIMA.

Create your SVG Drawing

The first step in animating your SVG drawing is to create the drawing itself. You can use software such as Adobe Illustrator or Inkscape to create your artwork. Keep in mind that the animation will be a continuous loop, so consider the placement and design of your elements to ensure a seamless transition. In this tutorial, we start by creating a base image, duplicating it, shrinking it, and embedding it into the eye of the original image. 

Add the Scale Animation

After finishing your SVG drawing, import it into the SVG ANIMA app. Access the app by going to https://svganima.com/app/ on your web browser and simply drag and drop your SVG file onto the workspace to begin animating.

Select the element to animate in the left panel or directly in the drawing.

IMPORTANT: the element to scale must always be a group. If it’s not, select the element, click Object, and then Group.

Click on the ANIMATE button and select Scale. This will open the Scale settings in the ANIMATION panel on the right.

Edit your Scale Animation

First, edit the animation’s duration with the Duration option. To create an infinite zoom loop, check the Infinite box in the right-hand panel.

The cross represents the scaling center. For a zoom effect centered on the eye, move the scaling center to the middle of the eye. For added precision, position it at the center of the eye as shown in the small image inside the larger image.

In the animation panel on the right, you can adjust the percentage of scale for each keyframe of your animation by setting the Scale X and Scale Y values for each keyframe. To add more keyframes, simply click the New Keyframe button located in the right-hand panel.

Additionally, you can control the speed of each keyframe animation at the beginning or end using the Spline option. By default, it’s set to Linear, meaning there’s no acceleration or deceleration. To customize this, select Custom. You can move the points on the graph to see how adjustments in the lower part of the graph affect the timing compared to the Linear setting. Here, we will use this feature to allow the animation to start slowly and then speed up toward the end. Adjust the spline until you achieve your desired effect.

Save your Animation

When you’re happy with your animation, it’s time to export it. Just click on File > Save and Download. Your fresh animated SVG will appear in your Downloads folder.

With SVG ANIMA, creating scale animations for your SVG drawings has never been easier. Whether you’re a graphic designer, animator, or just someone who wants to add some extra flair to their designs, SVG ANIMA makes it easy to bring your SVG drawings to life. Follow our tutorials and you’ll be creating captivating animations in no time!

Transform Your SVG Animations with SVG ANIMA Pro!

Take your animations to the next level by upgrading to SVG ANIMA Pro! Unlock Advanced Animations that engage your viewers and remove watermarks from your designs. Add a layer of interactivity with animations that trigger on Hover, Click, and Scroll.

Efficiently manage your projects with Bulk Animation Speed Editing and Bulk Color Editing, and enhance user engagement by incorporating Hyperlinks into your SVGs. With Priority Support, you’ll get fast help whenever you need it.

Don’t wait—upgrade today and start creating eye-catching animations that impress!