Mind. Blown.

Every time I’m done teaching a full day motion and usability workshop, I do this really stupid thing.

I rebuild my entire workshop from scratch while incorporating all the new feedback, plus new research I’ve done.  

Click here to learn how to sell motion to stakeholders

I lost count of how many times I’ve done this over the last several years. I think I’m on my 15th version or so.

I’m only mentioning this because it’s typically stressful, and halfway through the process (where I am right now), everything is in pieces that I know will fit together. Somehow. If I just stress out a little more.

The good news is that because of this relentless workshop testing, my workshops are waaaaay better than when I first started (apologies if you were in those, I probably owe you a beer).

Yesterday, as part of my ongoing research on choreography, I was re-digging into the Google Material Motion guidelines. Personally, I think their guidelines are the single best documentation ever created for motion design in digital products.

Tucked away on their site, I found this mind blowingly cool page on UI animation I had never seen before. Also on the page is a link to ‘Download motion sticker sheet.’

https://material.io/tools/motion-sticker-sheet/

You should do that.

The unfortunately named ‘sticker sheet’ (they should have named it something more descriptive like ‘Insane Motion Library of Total Awesomeness’) is in fact an incredible free After Effects UI animation file with all the Google Material Motion timing and easing.

Everything is already built for you to analyze and learn from. It’s really cool.

I also really like that on the page they have these great little explainer videos that show you the logic behind how they set up their projects.

For example, I learned that they pre-comp with linear motion, than apply their easing using time remapping.

I’ve never taught this way of working because it involves the extra step of pre-comping, but it makes a ton of sense if you’re building motion libraries because you just apply a single curve.

It’s a pretty brilliant way of scaling your projects.

If what I said about ‘pre-comping’ and ‘time remapping’ makes no sense to you, sit tight because I think I just got inspired to record a new tutorial on this exact topic :)

FREE AFTER EFFECTS COURSE

FREE LottieFiles Icon Animation Course For UX/UI & Product Designers

Create a Professional Icon Animation and Play it on Your Phone (no experience necessary)
  • Learn how to make an icon animation in Adobe After Effects

  • Show-off your icon animation on your phone for your team, clients, or stakeholders

  • Build a portfolio-quality showcase UI Animation 

  • Export your assets for hand-off to engineers

GET FREE COURSE
You're a designer, you get paid to have opinions. Share them! 👇🏽
Close

🔥 Take 15% off your first purchase

90% Complete