Animate an SVG icon in After Effects CC

Learn how to go from a static icon to a fun animation using Illustrator CC and After Effects CC

Welcome to the very first tutorial in the #WeekOfIcons series. Week Of icons is an initiative by Adobe and Iconfinder that celebrates the craftsmanship of icon design. This year, the campaign focuses on a fusion of icon design and animation. Throughout the week, you will get to read three icon animation related tutorials and will have a chance to download five freebie icon sets, including some animated icons.

Now that you know what this is all about let’s jump into the fun part — learning how to bring icons to life.

Let’s suppose you have an icon or two that you’d like to see enlivened by means of a visual illusion — animation. Where would you begin? Perhaps you have the SVG files sitting around, and Adobe Creative Desktop Apps such as Illustrator CC and After Effects CC at your disposal, but maybe the solution eludes you.

Today, all of that changes. I’m going to demonstrate how you can easily animate an SVG file, which includes preparing an SVG file in Illustrator, explaining how to import it into After Effects CC, converting it to Shape Layers, adding the movement, and lastly commenting on the exporting/rendering process.

A quick glimpse into our finished animation

You can jump directly into one of these four steps:

• Preparing the SVG in Illustrator
• Importing and organizing in After Effects CC
• Animation process
• Exporting the animated icon

By the end of this blog post, you will attain the fundamental knowledge required to transform any SVG into a beautiful work of art. Let’s dive in!

Preparing the SVG in Illustrator

Let’s start by opening your SVG file of choice in Adobe Illustrator CC. I will be animating a little car icon, which is, by the way, one of the Week Of Icons freebies.

After opening the file, we need ungroup and separate all of the objects into layers. You can do this manually, or use Release to Layers (Sequence) to speed up the process. Finally, we’ll need to Save As an Illustrator CC file before importing into After Effects CC.

After Ungrouping the objects, we can Release to Layers (Sequence) to avoid wasting precious time.

Importing and Organizing in After Effects CC

Now we’re ready to import into After Effects CC. Let’s use the Keyboard Shortcut Ctrl+I (Windows) or Command+I (Mac) to load the Import File dialog box, or navigate to File > Import > File… From there, select the Illustrator CC file that we prepared and click Import. A smaller dialog box should appear with the name of the file you chose. Select Composition from the drop-down list that is labeled Import Kind.

A quicker way to import a file is by double-clicking the column area in the Project panel.

In the Timeline Panel, we should see a new composition. Double click on the new composition. We should now see our Illustrator CC layers with their orange icons to the left of the layer names.

Before we can get down to business, we’ll want to convert all of these layers to Shape Layers. We can do so by selecting all of them with Ctrl+A/Command+A, or manually with Shift + Left Mouse. Once we have the layers selected, Right Click on a layer, and select Create > Create Shapes from Vector Layer.

Now, with the new Shape Layers highlighted, drag them to the top of the panel above the Illustrator CC layers. Delete the Illustrator CC layers to clean up the clutter.

Converting Illustrator CC layers to Shape Layers in After Effects CC

While not necessary, it’s important that we give each Shape Layer an appropriate name and/or label color. Doing so will allow us to work more efficiently when we’re concentrating on the keyframes. In the example below, the labels’ colors more or less match the fill of their respective Shape Layers.

It’s always helpful to organize your Shape Layers with appropriate names, label colors, and layer arrangement.

Use the Keyboard Shortcut Ctrl+K/Command+K or Composition > Composition Settings… to adjust the settings. From Composition Settings, we’ll want to choose our Width, Height, Frame Rate, and Duration. For this project, I’ve chosen 60 frames per second due to its smoothness.

At this point, it seems as if everything is ready to roll, but there’s one last thing to get the prep work out of the way: we need to group certain layers together so that their movements are synchronized to another primary layer that we can control. This method is called Parenting.

Using the Pick Whip to assign a parent layer to several Shape Layers.

For our example, I assigned less significant layers (child layers), such as the windshield, body details, tree, and ropes to the primary car body layer (parent layer). This allowed me to control properties like the position and rotation of the entire car (excluding the wheels) with just the parent layer.

The Animation Process

I wanted to make the car icon hit a rock, become slightly airborne, lift the tree, and open the trunk as well. I started with the rock, car, and wheels, getting the bounce just right. Then it was time to take on the biggest obstacle: creating the overlapping action on the tree. Upon finishing that, I tackled the smaller details, like the trunk and ropes.

Details to be animated

We will cover more animation tips in a later blog post, but here we will go a bit more in-depth about a couple of things. The first order of business was to make a rock element or layer, but instead of returning to Illustrator CC to add another layer, I simply used the Pen Tool in After Effects CC. It allowed me to rapidly design the small rock shape.

Oh, the mighty Pen Tool!

The trunk was a relatively simple task to carry out. It wasn’t an original element, meaning more After Effects CC improvisation using the Pen Tool. I set its position to the rear of the red vehicle and set the anchor point to the bottom left vertex. Using the Pick Whip, I assigned it to the car body parent layer. The penultimate step was to paste an expression to the rotation property that gave the layer a bounce/overshoot effect. Then I added the rotation keyframes.

A look at the car body and trunk layers (soloed). Notice how the trunk is parented to the body.

Everything else was done in a similar manner: keyframing stuff until it looked and felt right, taking time to observe the animation at different speeds using the Preview panel, stepping away for short periods to gain a fresh perspective, and so on. Eventually, I decided the result was satisfactory and ready for human consumption.

Voila! The completed animation.

Exporting the Animation

By this point, you’re eager to show your artwork (in this case, animated iconography) to the world. But how do you export your animation for everyone to see? There are several ways of going about this, but suppose you’d like to go back to the scalable vector graphics (SVG) format? In other words, what if you wanted an animated icon on your website that looks pristine and sharp regardless of its size? The solution is an After Effects CC extension called Bodymovin combined with the mobile library Lottie. But you’ll have to wait until Iconfinder’s next blog post (How to use animated icons on a website or a mobile app) to learn more! It goes live on December 12.

P.S. Here you can find my Illustrator CC and After Effects CC files.

Week Of Icons is an initiative by Adobe and Iconfinder that celebrates the craftsmanship of icon design. Introduced in 2017, the campaign focuses on inspiring designers and design-enthusiasts to learn more about iconography.

The car icon used in this article is part of a Christmas icon set by Monkik. The set is available for download as today’s Week Of Icons freebie.