Blog

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...

Continue Reading...
How to Animate a 3D Card Flip in After Effects

Follow along and download the free the '3D card' After Effects project assets

I wanted to show you the fastest and best way to build a 3d card flip in AE.

Long story short I was using my medical app that connects me to my doctor and noticed that they violate one of the cardinal rules of UI...

Continue Reading...
How to animate an icon in After Effects

FREE AFTER EFFECTS COURSE

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...

Continue Reading...
How to animate a form in After Effects

Follow along and download the free 'How to animate a form' in After Effects project assets

In this tutorial, I'm going to show you how to animate a form in After Effects.

I was working on a project a few weeks back and wanted to share with you how I would animate the cool growing line form...

Continue Reading...
Motion design in digital products: a white paper

Download article as PDF

In this article, I spell out the value of motion in digital products. I explain and dispute four myths held by designers, engineers, and stakeholders. Then I examine six challenges when it comes to delivering motion. I list the three ways that motion supports...

Continue Reading...
How to animate a sticky nav in After Effects

Download the 'sticky nav' After Effects source file

In this video I show you how to create a sticky nav in After Effects. 

Sticky navs are weird, especially to mock up with motion in After Effects.

I actually didn’t fully appreciate how tricky they are until I was helping my...

Continue Reading...
How to create a motion path in After Effects

In this video I show you how to create a motion path in After Effects. 

Typically in UX, you aren’t dealing with a lot of motion paths unless you’re creating motion for material design projects, radial progress bars, or something game related.

The easiest way by far is to just...

Continue Reading...
How to create a finger tap gesture in After Effects

Download the 'finger tap gesture' After Effects source file for free

In this video, I'm going to show you how to create a finger tap gesture in After Effects. 

Ok, let’s talk about the art of the finger tap gesture in After Effects.

First of all, as you know, there are multiple...

Continue Reading...
How to export your Adobe XD file to After Effects

In this video I show you how to use the amazing Adobe XD feature 'Export to After Effects'. Long story short, it’s pure awesomeness.

If you use XD, you are stoked. The XD team just added an ‘export to After Effects’ feature that they announced at Adobe Max.

I’m usually...

Continue Reading...
How to make a GIF in After Effects

In this video, I'm going to show you how to make a GIF in After Effects. 
 
If you’ve been living in a cave for the last 10 years, you may have missed how GIF files have been crushing it for a while. GIFs are super awesome for a variety of strategic tasks, including...
Continue Reading...
Free frames to milliseconds converter for After Effects

Download the 'frames to milliseconds' After Effects source file for free

Hey, I wanted to share my super nifty and awesome ‘frames to milliseconds’ converter widget that I made for After Effects.

Why did I create this?

When delivering UX projects that you make in After Effects, you...

Continue Reading...
How to use Sketch2AE to save a project to After Effects

How to use Sketch2AE to save a project to After Effects

Download Google’s plugin Sketch2AE for free here: https://google.github.io/sketch2ae/
…….

In this tutorial, I show you step by step how to use Google’s Sketch2AE plugin to save your project.

Ok so this...

Continue Reading...
How to install Sketch2AE for Sketch and After Effects

How to install Sketch2AE for Sketch and After Effects

Download Google’s plugin Sketch2AE for free here: https://google.github.io/sketch2ae/
…….

In this tutorial, I show you step by step how to install Google’s Sketch2AE plugin both for Sketch and...

Continue Reading...
How to animate your UI using simple expressions in After Effects

If you want to be a baddass in After Effects, there is no better way than to get started using simple expressions. Expressions are little pieces of code you can apply to a layer property like it’s position, rotation, scale, etc. If you can’t code, no worries, you can just select the...

Continue Reading...
UI Animation After Effects Tutorial: Color Correction Slider

Ok, I admit, it isn’t often your project has a color correction slider. And it’s probably even less often that you’d be online searching for for how to animate one, but just in case the perfect storm has transpired, I’m answering that question today.

The beauty of these...

Continue Reading...
Google Authentic Motion Animation – Radial Reaction

I’ve been spending a bit of time getting into the mechanics of Authentic Motion and wanted to share this technique. Essentially, this is two separate animations, one for the ‘hamburger’ icon transforming into a back arrow and the other is where the content cards...

Continue Reading...
Google Material Design – Point of Origin

With the publishing of Google Material Design, a whole world of animation possibility has opened up. In this quick tutorial, you’ll learn how to set up and animate a ‘point of origin’ effect, which is insanely useful. You can find this discussion and animation...

Continue Reading...
1 2 3