Ok wow we covered a ton of amazing UI Animation resources on this call. Some awesome questions and really great new links and resources I wanted to share.
First off, I am happy to report I continued my mission of messing up every single zoom call recording. In this case I didn't record the call at all, so I feel like I unlocked a new achievement.
I did demo a lot more UI Animation in After Effects, and I plan on doing this moving forward. So, bummer that this wasn't recorded, but be sure to make the next call where I demo a lot of After Effects key things in realtime.
Below is a list of cool things and questions I answered.
People keep writing in with questions about how their Lottie animation is broken or doesn't look right. On the call I demo'd in After Effects how to break your Lottie file by using unsupported features. What are those features? You can find them here.
My buddy Todd turned me onto the 'no code' movement. In particular, Webflow is a platform for designing and deploying real web pages. It's like Dreamweaver but without the constant desire to commit suicide. Webflow now supports Lottie which is a game changer if you're working on web pages. You can learn more about it here: https://webflow.com/blog/after-effects-and-lottie-meet-webflow
Clearly we spent a fair amount on Lottie in this call. I had another friend turn me on to Anima which is way to use Lottie files in Figma. Not all the features are there in terms of interactivity. But you can use a JSON file directly from LottieFiles and drop it into your Figma file and share it to your team. So that's pretty amazing. You can check it out here: https://www.animaapp.com/figma
Not a ton of folks know or appreciate how powerful Lottie is when combined with user interactivity. The use of 'scroll stories' is something I'll be featuring more and is a really cool new way to use After Effects UI animations directly in your projects. This guide outlines with great examples how engineers can use your Lottie files in really cool ways based on user input. Check out the features here: https://lottiefiles.com/interactivity
I fielded a question about creating 'motion mood boards.' I have two approaches I recommend. The first is to create recordings on your phone of actual products. The second is top pull inspiration from places like Dribbble (filter for animation and select 1 year out for the really great stuff) or my buddy Brandon's awesome Instagram (seriously check it out he has over 100k followers and only posts about motion UI).
Since I've released my UI Animation Certification course, I've been interviewing top level hiring managers and PM's at companies including Apple, Google and Facebook to learn what they look for (and what to avoid) when it comes to motion. There's a ton of content but some key takeaways are that you want to present motion in the context of solving a problem, identify your constraints, and focus on the value to the user, the product, and the business. You can learn how to do all this in my live Zoom workshops, or in my UI Animation Certification Course. You can watch my interview with Jennifer Darmour, a VP at Oracle here.
I get a ton of questions about Motion Standards. So much I actually created an entire module for it in my UI Animation Certification Course. This is a very powerful skill to have. In general, the more strategic leadership you can provide, the more valuable you will be as an employee, and the more you will put yourself ahead of everyone else in job interviews. I covered over durations, easing, and handoff. You can get a bunch of free resources from Google here with regard to duration values.
My buddy Chase is another really brilliant guy. While I feel this is maybe a bit too cutting edge, I love the idea: saying goodbye to web portfolios and instead having it be one massive Figma file. I thought this was really cool. Not sure how hiring managers would feel about it but something to consider.
My buddy Todd is a product design genius. He's one of those friends I feel lucky to know. On a recent call he was talking about his ideas around these three categories. 'Look real' is something you would see in After Effects. It adds value by demonstrating something. 'Feel real' is something like a prototype you would make. It feels real. 'Is real' is using something like Webflow and the 'no code' movement. It's a real web page with real live components.
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