Issara Willenskomer

free animation lesson: google authentic motion – radial reaction

  • Save
free animation lesson: google authentic motion – radial reaction after effects material design gif animation ui

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.

keyboard shortcuts: L or F like