Google Authentic Motion Animation – Radial Reaction

By August 6, 2015Tutorial

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

I cover the PSD setup (which would also apply to Illustrator) for the design source file and then we jump into it. As with a lot of these UI animation projects, it really helps to think through what you want to accomplish before you jump in. I share some best practices in how I approach the setup and execution.

Some of the After Effects tools I use to create this include Nulls, Parenting, single axis scale, Ease and Wizz, and After Effects Expressions.

In a future post I’ll cover Ease and Wizz and why it’s so insanely baddass for UI animations.

Just a quick heads up, if you’re watching this and you’ve never used After Effects, and you’re all like, ‘yo what the eff is going on here, son?” head over here and watch my ‘UI Animation with Adobe After Effects – Fast Start’ video. This will get you up to speed. And if you’re ready to turn yourself into an ass kicking UI animation machine, you can pick up the ‘Rapid Prototyping with Adobe After Effects’ training.

Not ready to join? Join over 1,000 other designers and watch my FREE ‘Rapid Prototyping with Adobe After Effects Fast Start’ video series.

Even if you’ve never worked on a timeline or with keyframes, I walk you through the 7 steps that it takes to create professional UI animations from your Photoshop file. It’s the training I honestly wish I had when I started learning this stuff. It’s free. It’s baddass. And it’s way easier than you think. [aweber_opt_in opt_in_id=”1234795980″ listname=”uxm-master-list” redirect=”http://www.uxinmotion.net/stoked/” meta_redirect_onlist=”http://uxinmotion.net/stoked/” adtracking=”Early_notification” split=”” button_text=”Get FREE training”]