After Effects fundamentals for UX Motion

[Music] hey everybody welcome to motion ux today we're going to take a look at after effects i want to teach you just enough to get into the tool and start animating your designs right away let's dive in let's go ahead and open up after effects and here i'm using after effects 2022 and when i open it up you will see this splash screen here where you're able to open up previous projects and just start a new one and for our case we're just going to go ahead and hit new project which essentially just closes that splash screen down so here on the left you can see this is your project panel here is where you'll have all of your compositions all your media all of those different types of assets that you can drag and drop into the composition that you're currently working on this is your composition window when you actually have a something that you're working on you'll see the visuals and all those things here and you can click here to start a new composition or import composition from a footage and here on the right if you're working in the default workspace you will see all of these different panels that will auto hide each other when you click on new stuff here on the bottom this is your timeline and layer panel let's go ahead and start a new composition you'll see here there's a bunch of different settings it's a basic panel advanced and 3d renderer for the purposes of just getting in and just getting started let's ignore the advanced in the 3d render tab name your composition to amazing animation and you can go ahead and select a preset here typically you'll start something around hdtv 1080 uh 29.97 but this depends really just on the project that you're working on so you can alter the size of your composition to whatever best fits your needs and you can also change it after the fact so don't be too worried about it at this point right here typically with ux motion design we really want to work around 60 frames per second even sometimes 120 frames per second as it becomes more of a common frame rate on our devices we can start with the resolution at full we always want to start at zero and change the duration to whatever you feel like your project is going to be this also is able to be changed later our background color is simply just the background color of our composition it is technically transparent until we add a background layer but this just allows us to see what designs that we have on top of it we're working with darker assets we can start with a light color background this isn't really too important we can change that later on as we add a background layer in our composition so i'm going to go ahead and just leave that as white if you're importing your design say from figma to after effects using the plugin aeux a lot of the composition settings will be taken care of during that import process it will default to 60 frames per second and the size of your composition will match your frame that you're importing from figma and so a lot of this stuff you typically won't have to deal with but it's good to understand where the settings are and what they do in case you have to alter those compositions that have been pre-made during that import process everything is set up we have it at 60 frames per second we're gonna hit okay and now we have our composition here you can see in our project panel we have that composition here and we have it already open here in our actual timeline scrubber and currently we don't have anything that we can really select or animate it's just a blank composition that is going to hold some of our animations next let's get some layers into here that we can start animating so if i go ahead and i right click our timeline here i can go to new and solid and i can pick a solid color to be whatever i want it to be and it will automatically match the size of my composition and it will name it as close to the color as it is but i will just rename that solid and so now we have this layer that's called solid and you can see as i selected i have this bounding box and if you're not seeing a bounding box you can actually go to view and click show layers control or shift command h will show and hide helpful to have it on most times until you're working at something at a very very small scale and sometimes these layer handles get in the way and so you want to do shift command h and you can show and hide that so now we have a layer on our timeline and this layer is treated just the same as you would treat any other layer in any other design program whatever is on top is what you're going to see first whatever is on the bottom is going to be covered up by everything else and so if i do command d i can duplicate this and you can see that we have all of these different layers here that we can move all around our composition a little bit hard to see since they're all the same color but you get the idea another very common layer type is shape layers in after effect if you go up here you can see that we have our rectangle tool a rounded rectangle ellipse polygon and star tool if i go ahead and select rectangle you can see that i can click and drag and it starts a shape layer here in the shape layer we have this actual rectangle we have the rectangle path that we've just drawn here we have a stroke we have a fill and we have some transform properties within that rectangle but you can see if i collapse that menu it's just a layer just as my solid layer is and i can actually click into this layer and i can change the color to whatever i want it to be let's dive into properties so as i open up this layer when i get down to the smallest point so say we're going from contents rectangle rectangle path and size this size right here is a property of this layer the position is a property of the layer and the roundness is a property of this layer and these i can actually come in here and i can alter these properties and these properties are the things that we animate to actually show motion on the screen the most common properties that you will encounter as you're animating your designs are position so if we go ahead and tap p we will bring up the position property and this will move the positioning of this entire layer and everything contained within it scale if i hit s on my keyboard i will alter the scale of the actual object or the layer and i can unlink those properties so that i can scale the width and the height independently of each other t for opacity also known as transparency and then if we tap r that will bring up our rotation property and that will rotate your layer based off of the anchor point and if we actually go all the way up here to our pan behind anchor point tool we can actually grab this anchor point and we can move it to the center in most cases you will want your anchor point to be centered so things rotate and scale and move from the center out there are definitely cases where you're going to want to move that maybe all the way to the left all the way to the right all the way to the top all the way to the bottom depending on what you're trying to animate another super common animation in after effects is trim paths so if i go ahead and create this stroke layer here and i go ahead and expand this layer and do add trim pads you will see that we have added some new properties to this actual layer so if we go ahead and expand that we can see that we have a start we have an end and we have an offset so if i go ahead and drag this value you can see that the actual stroke is starting to disappear along our vector path and i can also do the end and you can see that that changes the end and if i do offset you can see that that just changes what currently is visible and moves that along our path and it cycles through endlessly so now that we have a good idea of what are the common properties that are being animated let's go ahead and apply some animation so i'm going to tap p and hold shift and then tap t and s and r and that will bring up multiple properties at the same time so we can see them all in one view and if i go ahead and i move this and i move along my timeline scribbler you'll see if i play it nothing is happening nothing is actually moving because we haven't applied any animation or keyframes to this layer beside each property you'll see this little stopwatch and so if i click it you'll see that it actually lays down what is called a keyframe and if i go ahead and move this you can see still no animation is happening as i'm going forward in time but if i go forward in time and move it again you can see that a keyframe has automatically been added because it sees a change in the property and so now if i go back in time and i play it you can see we have some animation and we can do this for all of our properties so if we go ahead and we select scale rotation opacity and we go forward in time holding shift to lock it in place with my with our other keyframe we can change these properties any way that we want to and because these properties are being changed a keyframe is automatically being put down so now if we play it we got all of these properties animating at the same time and if we want to be able to look at our animation without having to pause and play and pause and play again and again and again we can actually change the in and out point of our preview and this bar at the top here is our work area start and our work area end and so if i were to drag that all the way over here holding shift so it snaps in place if i play it you will see that now it loops between our work area start and our work area end if i tap my n key it will automatically move the work area end to wherever my timeline scrubber is and likewise with the first one if i go ahead and tap the b key it will change the work area start to wherever my timeline scrubber is so as we preview this you can see that we have some motion happening in after effects and this is amazing right we can also tell that the motion is not very like smooth or fluid or natural like it feels a little bit off that's because we're only using linear keyframes if we go ahead and we select all of these properties and we do f9 you can see that our keyframes change to these hourglass type of shape and what we've just done is we've added easy easing to these keyframes so now as we preview we can see that the speed starts slow it speeds up too fast and then it slows down again at the end the reason why this feels a little bit more natural is because nothing in reality starts and stops instantaneously there's always some sort of ease in or acceleration and deceleration as things start moving and stop moving often times you need a little bit more control over your easing let's focus just on our rotation easing so if we click the stopwatch of all the other properties it will remove everything that has been applied to that specific property and if we play we can see just the rotation is happening we want more control on how it's coming in and how it's going away maybe we want it to start fast and then and very very slow if we go ahead and we select this property and we click this graph editor tool right here you can see that this is a visual representation of our speed over time to see this a little bit better we can select those keyframes and select fit selection to view and so now we can see this entire easing happening over time and so now we can see this easing curve a little bit more clearly and if i were to select this first keyframe and we change it all the way up here we can see how it's changing our animation so it's starting very very quick and then it's starting to taper off and get a little bit slower we can also undo that command z and we can do the opposite we can say it starts very slow and then it ends very very quickly the graph editor is amazing it allows us to get very very specific with our easings with inside of our motion let's say we wanted to change the easing within our position keyframes let's go ahead and make a little animation where it's moving down the screen and we'll do f9 to do easy ease and we can see it looks okay at this point let's go ahead and get into the graph editor and you can see this looks very different than what we had before that is because this specific property has two values associated with it it has the x position movement and the y position combined into one property and by default you cannot alter these easing curves in the graph editor you can however if you right click the graph editor and go to the speed graph you can change the speed of the curve and the speed graph editor isn't as easy to work in but if you see we can take this first keyframe and we can pull it all the way to the right and you can see that you can see that it's going to start slow get fast and then end slow and we can pull this one all the way over here so that it ends very very quickly and so you can see that we can duplicate a similar type of easing that we had with our rotation but it just happens a little bit differently here alternatively we can actually right click the actual position and we can separate the dimensions often times when we're dealing with screen based motion we're not moving diagonally that often and so it's sometimes it's easier to just focus on just the exposition movement or just the y position movement so if we go ahead and just look at the x position we can right click and go back to our value graph and you can see that we have this easing curve here and we can go ahead and we can move this to be what we want it to be so maybe it starts off very slow and it ends very fast and you can actually see our path is being affected by that and it feels a little bit weird because we don't have the same easing applied to the y position so if we go ahead and go to the y position and we do it starts off slow and it ends fast you can see now that it's moving more in a straight diagonal line because the x position and the y position easing matches each other and if we go ahead and remove the y position we can just take a look at x position easing and we can see what it's doing a little bit clearer typically when you're working in this motion ux space you will see three common types of easings you will see this one where it's an ease out and ease in where it starts off slow speeds up and end slow this usually is used for things that are on screen already and they're moving to another position and you will still see it on screen you also see this type of curve where it eases in and then it gets very very quick at the end and typically i like to refer to this as an exit easing because typically you will use this in cases where something is leaving or being removed from the screen so it starts very slow and then it speeds up as it leaves and ease out where it starts off very very quickly and then it slows down as it ends and this i typically refer to as an enter easing because typically you see this as something is not on screen when it starts and then it sp it very quickly enters the screen and slows down as it reaches its final resting place another common task done in after effects is called pre-comping so if i go ahead and expand my layers panel and we right-click our layer we can go ahead and pre-compose this specific layer and we will move all the attributes to the new composition and we will hit ok nothing has changed with our animation but you will see that this layer icon has changed and we have a new composition in our project panel and if we go ahead and we double click on this you can see it opens up a brand new composition and our shape layer is in there you can think of compositions the same way you would think of symbols or components in a tool like figma or sketch and if i go ahead and take this layer and i duplicate it and i move it over you can see it's the exact same animation happening if i were to go inside of this layer and say i add something to this animation like we pull up the position property and we actually make it a little bit bigger and we make it we copy this keyframe and we move it to the back so that it loops we go back to our other composition we can see that the animation has been updated for both of our compositions because it's referencing the same animation what's great about this is we can make things and reuse things that we commonly do in our animations and so maybe there's a specific micro interaction of a menu opening or a drawer opening or closing or something sliding in you're able to create that animation once and reuse it across all of your compositions and all of your animations and so it becomes very very powerful so say we're done with our awesome animation and we want to go ahead and we want to export this as a video or something to share with our product owners or our designers on our team if we go up here to file we can go ahead and do export and we can do add to render queue or we can do add to adobe media encoder typically i go with adding to adobe media encoder if i'm needing to have an actual video file to share because i have there's a lot more you can do with adobe media encoder to compress and customize the rendering properties of your actual video but to make it simple we can just go ahead and do add to render queue and that will render it right here in after effects the downside of rendering in after effects is that you can't do anything until the render is complete so if you're working on multiple projects and you want to be able to render something as you continue to work use adobe media encoder because that will render in the background as you continue to work in your file and in here you have all of the options of what is your render settings what are your output settings all of those sorts of things so you can get it tuned into the specific quality that you're looking for but this if we go ahead and we render this it will go ahead and do its magic and then that renders that video file to my desktop the most typical way you see some of these animations shared is through a gif format exporting a gif through after effects by default is not a straightforward process you have to export first a png sequence you import that into photoshop and then you export a gift from there because it's a task i do fairly frequently i need something that automates that process and to help with that i use plugins gif gun is a plugin that allows you to create gifs from after effects with a single click and you just click once it will render out a video convert it to a gif and save it for you right where your project file is blow is another plugin specifically for easings that simplifies the graph editor interaction and allows you to have some standard easings to apply and so all i have to do is select my keyframes i select a specific easing that i've already created before and i apply it and now that easing has already been applied to all of the keyframes what's awesome about this is that these are the keyframes that i use on every single project and these are the bezier values that i give to my developers when they implement my animations in their production environment this tool helps me make sure that i'm always using the same easings every time i attack a project aeux is another plugin that allows me to take all of my designs from figma and import them into after effects and i actually have a video on that if you want to learn a little bit more about how to set up that process body moving is the last plugin i'll talk about and this is how we take our after effects animations and export them as a lotte file that we are able to use in production environments and natively render our animations on the web or on ios or android i also have a video talking all about lottie what it is how to use it and how to use body moving as well and as you really start getting more comfortable with after effects you'll want to customize your workspace to be most efficient for the way that you work and so we can actually take these plug-ins and drag them to be anchored into our workspace environment in after effects and as you start seeing what you use a lot of when you use certain tools you will customize this to fit your needs and so i actually have one saved here that has all of the plugins in the specific order that i need them to be in so that they're very accessible and easy for me to use and that's it everybody a brief overview of after effects teaching you just what you need to know to get started animating your designs right now catch you guys next time

Channel: Motion UX

Views: 1,085

Keywords: Ux, Motion, Ux motion, Design, Adobe, After effects, Lottie, Microanimations, Tutorial, Ui, Animation, Airbnb, Production, Experience design, Workflow, Tips, AEUX, Lottiefiles, ux animation, figma, import, designs, ui ux, how to, motion designer, microinteractions, sketching, ipad, apple pencil, lofi, fundimentals, problem solving, thinking, workflows

Id: FVxXUt2K8NI

Length: 19min 6sec (1146 seconds)

Published: Wed Nov 03 2021