Shop Onsite workshops Blog Templates Affiliates About Bundles Login

How to create a UI Animation process video in After Effects

Click here to download the source files and follow along

I’m super excited to share this technique with you.

Here’s the idea: sometimes you need to show a video render and actually show the layer handles and UI elements. It’s part of the ‘behind the scenes’ or process materials that you may include in your portfolio, on your site, or even as part of a pitch or presentation.

This gif communicates what I’m talking about.

When I figured out that I wanted to do this for a project, it literally took me days. You can’t really even google it. In this tutorial video I show you the fastest and easiest way to make this happen.

Here’s the step by step  

  1. Preview your project in AE
  2. Select the layers you want to reveal handles
  3. Hit ‘Command + Shift + H’ on your keyboard
  4. Open Quicktime
  5. Select File > New Screen Recording
  6. Click record
  7. Click and drag to select your canvas
  8. Hit record to start recording (weird UX thing I know)
  9. Let it loop a couple times (keep your mouse cursor out of the frame or it will record that)
  10. Stop recording
  11. Bring it into AE and trim it down to the loop points
  12. Export as a GIF or video file

That’s it!

🔥 Save 15% on any UI animation course or bundle on

Join my mailing list to receive a one time coupon, plus the latest news and updates from me. Don't worry, your information will not be shared.

Click here for coupon

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


🔥 Take 15% off your first purchase

90% Complete