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 animation: focus on a single unified movement.

The only exception is when you want to convey process (like an email being sent, a purchase being made, etc).

The reason is that it forces users to wait for an animation to complete BEFORE starting a new animation. So they basically are locked out with no control while they wait to get where they want to go. It’s not great, so please don’t do it.

In this tutorial, I show you a bunch of useful pro tips for building a 3D card.

You’ll learn how to make a 3D layer, how to animate a quick 3D rotation, how to swap graphics so that it seamlessly transitions when it flips, and how to create a parallel 3D light to get that tasty flat lighting effect.

I also cover the ‘Flow’ plugin (which I haven’t created a tutorial for yet). It enables you to instantly apply industry standard easing with one click. It’s awesome.

You’ll also learn how to use parenting to build smarter projects that work well for UI animation.

You really should be doing this.

This means making and using fewer keyframes so that your project is light and easily adaptable to team/stakeholder feedback.

(long story short, one of my friends that I hired for a project for a presentation to Bill Gates (no kidding!)  is an amazing motion designer. He had to take off for vacation 2 days before we shipped. I was unable to make the feedback changes because he used too many keyframes. I had to redo all his work. I was stressed. It sucked.)

You’ll also learn to iterate fast and quickly spin out an alternate version for your team/client using the duplicate command.

So yeah, I basically got super excited and covered a bunch of pro best practices, as well as covered a few of my critical timeline navigation keyboard shortcuts.

Hope you like this one!