Blog

How to Create Augmented Reality in After Effects

Hi, I created this Augmented Reality tutorial in support of Black Lives Matter.

If you like my tutorials, I invite you to donate to this historic movement via my donation page here: https://secure.actblue.com/donate/uxm-blm. I will match your donation up to $1,000.

If you donate $250, I will...

Continue Reading...
How to jelly your stroke in After Effects

How to jelly your stroke in After Effects
…….

In this tutorial,I show you step by step how to jelly your stroke in After Effects.

This tutorial is an improvement over a previous tutorial wherein I show you how to quickly and awesomely create the ‘jelly’ UI effect, where...

Continue Reading...
How to stroke to your jelly UI animation in After Effects (more awesome)

How to jelly your stroke in After Effects (more awesome)
…….

In this tutorial, I show you step by step how to jelly your stroke in After Effects.

This tutorial is an improvement over a previous tutorial wherein I show you how to quickly and awesomely create the ‘jelly’...

Continue Reading...
How to Convert Your Sketch Design to After Effects

UPDATE: this workflow can definitely get the job done. However, there is a newer more friction-free workflow that I blogged about using a free plugin called AEUX. Hence, you can now learn The absolute best way to get your Sketch file into After Effects


In this tutorial video, you are going to...

Continue Reading...
How to animate your UI button shape in After Effects

 

This is such a dope tutorial. You’ll learn how to animate your UI button like Colin Garven’s dope Submit button. Get stoked because you’re going to learn a really cool way to do this using After Effects shape layers.

 

UI animation credit: Colin Garven

UI animation credit: Colin...

Continue Reading...
How to animate Apple TV 3D Camera in After Effects โ€“ Part 2

In this video you are going to learn, “How to animate Apple TV 3D Camera in After Effects – Part 2”. This is such a fun technique and really is an opportunity to create delight. In Part 1, you learn how to set up your 3D scene. In this video (Part 2) I cover how to set up...

Continue Reading...
How to animate Apple TV focus in After Effects โ€“ Part 1

In this two part series, you are going to learn how to animate Apple TV focus in After Effects. This is such a fun technique and really is an opportunity to create delight. In Part 1, you learn how to set up your 3D scene. I cover mindsets and prepping tactics that you should employ when...

Continue Reading...
How to Create Parallax in After Effects

In this tutorial video, you are going to learn how to create parallax in After Effects. Parallax comes in many different flavors and designs and from a usability perspective can do many different things.

To begin designing and implementing user experiences that contain parallax, it’s...

Continue Reading...
How to start your UI Animation GIF on a specific frame in After Effects

 

Click here to download the source files and follow along

Here’s another pro UI animation tip I wanted to share with you. 

The idea is this: when you go to a site like Dribbble, you can see that the first frame of the animation is used as the ‘poster’ frame. 

...
Continue Reading...
How to animate โ€˜UI jellyโ€™ in After Effects

There’s something inherently powerful and cool about transforming the material of UI. By allowing the user to stretch and distort the material, the experience can become much more engaging and dynamic. Of course it can be abused as well, to the point where it impacts usability, so be...

Continue Reading...
How to create a jelly UI effect in After Effects

If you’ve already watched my first tutorial on UI jelly, you’ll be pleased because this one offers something a little different. There are fundamentally two different ‘UI jelly’ treatments I’ve come across.

Here are some references that illustrate what I mean...

Continue Reading...
How to curve your UI in After Effects

How to curve your UI in After Effects
…….

In this tutorial, I show you step by step how to curve your UI in After Effects.

This tutorial will let you add your UI to any curved screen in After Effects.

We’ll be covering the ‘Bezier’ effect, which gives you handles...

Continue Reading...
My top 12 After Effects feature requests for UI animation
 
Ae Fix me
Here is my list of 12 After Effects UI Animation feature requests. 
 
The backstory: some folks at Adobe reached out to me about my UI animation workflow and pain points. I think the larger context is that Adobe is really trying to figure out UX prototyping and they're starting...
Continue Reading...
How to Quickly Animate a Page Swipe in After Effects

Click here to download the source files and follow along

In this tutorial video, you are going to learn how to quickly animate a page swipe in After Effects. You will also learn some great easing numbers to create smooth gestural animations. You will also be learning critical keyboard...

Continue Reading...
How to Add your Prototype to Any Device in After Effects

Click here to download the source files and follow along

In this tutorial video, you are going to learn how to put your prototype on any device in After Effects.

This is a great way to share your work on your portfolio or in a presentation.  Your design feels more real and...

Continue Reading...
How to use adjustment layers to blur your UI animation in After Effects

 

Click here to download the source files and follow along

I created a quick tutorial video to show you how to quickly create an adjustment layer, 3 ways to locate an effect, and 3 ways to quickly apply the effect to the layer.

One of the things that makes the UI animation workflow unique...

Continue Reading...
How to package your UI animation project files in After Effects

Click here to download the source files and follow along

This week’s tutorial is a simple and super helpful thing to know.

Sometimes you need to take all your linked UI animation files, copy them into a single location, and have all the links update in your After Effects project file....

Continue Reading...
How to import multiple UI Animation projects in After Effects

Click here to download the source files and follow along

This is a really cool After Effects feature. It’s so simple I hesitated sharing it with you.

However, it’s been pointed out to me that I’ve been struck with the ‘curse of knowledge’, as they say. I figured...

Continue Reading...
How to retime your UI Animation for client presentation in After Effects

Click here to download the source files and follow along

UI Animation needs to be fast and clean. There’s no two ways about it. If it’s slow, it appears unresponsive, and unprofessional.

In fact, the single biggest mistake I see designers make is that their motion design is way...

Continue Reading...
1 2