Back to Blog

How to parent icons in After Effects

adobe ae after effects after effects tutorial animate animation design gesture interaction issara willenskomer motion parent icons prototype timing ui ui animation usability user experience ux ux in motion Feb 06, 2019

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.

Don't miss a beat!

New moves, motivation, and classes delivered to your inbox. 

We hate SPAM. We will never sell your information, for any reason.