Shop Onsite workshops Blog Templates Affiliates About Bundles Login

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

🔥 Save 15% on any UI animation course or bundle on uxinmotion.com

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! 👇🏽

Close

🔥 Take 15% off your first purchase

90% Complete