How to parent icons in After Effects

Follow along and download the free 'parenting icons' in After Effects project assets

I seriously couldn’t think of a better title for this tutorial, but trust me it’s got some seriously good tips.

Basically the idea is that I wanted to share how I would set up a simple parented animation using track mattes.

How to parent icons in After Effects

After Effects has two ways to ‘mask’ things. One is with mask (duh), and the other is with ‘track mattes.’ Each has pros and cons.

For some inexplicable reason, you can’t unlink a mask from its layer. So, if the layer moves, you need to ‘counter animate’ the mask to have it stay in place. Seems like a waste of keyframes to me.

What you can do instead is use another layer as a mask. After Effects calls that a ‘track matte.’

It’s pretty simple to use and what I like about it is you can use parenting and avoid keyframes. This keeps your project file nice and clean and highly iterable, which you need for your UX projects.

This could be a shape layer and let you control the boundary of things by animating the path shape. Lots of possibilities.

The downside is that it adds more layers, and I like to work as clean as possible.

There’s also some Illustrator workflow stuff I cover, as well as a little cool animation hack where you can create what I call ‘layer timing spacers’ to block in repeating durations super fast from the keyboard.

So really, this is less about parenting icons than it is about showing you some rad pro tips that will help you out a lot.


FREE LottieFiles Icon Animation Course For UX/UI & Product Designers

Create a Professional Icon Animation and Play it on Your Phone (no experience necessary)
  • Learn how to make an icon animation in Adobe After Effects

  • Show-off your icon animation on your phone for your team, clients, or stakeholders

  • Build a portfolio-quality showcase UI Animation 

  • Export your assets for hand-off to engineers

You're a designer, you get paid to have opinions. Share them! 👇🏽

🔥 Take 15% off your first purchase

90% Complete