UX in Motion's video: How to Turn an Avatar into A Header in After Effects

👩🏽‍🎓👨🏻‍🎓 Go here to watch my FREE course and learn how to Create a Professional Icon Animation and Play it on Your Phone (no experience necessary): https://bit.ly/3bzNqAX ⬇️ Also, see below to download free source files for this tutorial. 👉🏽 Download the FREE AE source files and follow along: https://www.uxinmotion.com/blog/how-to-turn-an-avatar-into-a-header-in-after-effects?utm_source=youtube.com&utm_medium=tutorials&utm_campaign=blog&utm_term=blog&utm_content=Y34 In this tutorial I show you how to turn an avatar into a header in After Effects. In After Effects there are always a million different ways of doing things. That’s what makes it so great. But that can also be super challenging and annoying when you’re first starting out. In the previous tutorial, I showed you how to work with track mattes. In this tutorial I wanted to introduce you to working with masks and how I might approach quickly building out a mask based transition in AE. I will say that this specific interaction is insanely challenging to execute well. For some reason, bringing on text over the UI nearly always looks bad and it’s super challenging to nail the timing and have it feel clean and crisp without looking bad. Full disclosure, I’m not a fan of the solution I’m sharing today. But I honestly feel that’s one of the great things about AE: you get to prove to your team/client that the idea IS bad. Also, it gives you the freedom to iterate multiple solutions to the same transition dilemma. Finally, what I also enjoy is that AE gives you the freedom to iterate all versions and give your team the freedom to choose the least worst option. Some designs really don’t afford motion. I keep telling folks during my workshops: motion is not a magic bullet. What I have seen is that when it comes to this kind of interaction where you are in a list view and the item embiggens itself, there are conceptually two solutions. Each solution can have a ton of variation in terms of craftsmanship. Solution 1: Expanding item overlays pre-existing items. This is what we’re doing in this tutorial. This is what the iOS App Store does (and the execution is completely terrible by the way, especially on the transition back). Solution 2: The entire UI zooms in to re-focus on the new lockup. This is essentially what the Pinterest App does, and does well. As does iCal on the iPhone. I’ve seen both used in many different digital products and can’t really say which I prefer and which supports usability better. That’s why I think testing is great. Happy prototyping, Issara ✅ Please don't forget to subscribe for more UI animation with After Effects tutorials and resources. ------------------------------- 👩🏽‍🎓👨🏻‍🎓 Go here to watch my FREE course and learn how to Create a Professional Icon Animation and Play it on Your Phone (no experience necessary): https://bit.ly/3bzNqAX 🤗 Find me on... Facebook: https://www.facebook.com/uxinmotion YouTube: https://www.youtube.com/channel/ux-in-motion Medium: https://medium.com/ux-in-motion Twitter: https://twitter.com/ux_in_motion Dribbble: https://dribbble.com/issara