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.
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.’
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 :)
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