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

A quick glimpse into our finished animation

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 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.
Converting Illustrator CC layers to Shape Layers in After Effects CC
It’s always helpful to organize your Shape Layers with appropriate names, label colors, and layer arrangement.
Using the Pick Whip to assign a parent layer to several Shape Layers.

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
Oh, the mighty Pen Tool!
A look at the car body and trunk layers (soloed). Notice how the trunk is parented to the body.
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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store