UI transition and micro interaction animation with After Effects - Hands-on Tutorial for beginners

welcome to the second episode on motion design using Adobe After Effects and in this episode I'm going to teach you how to animate this it's very simple again and in the next 30 minutes you will be able to animate this this can even be your first legit UI animation on After Effects are you excited I am [Music] here's a sample UI that we are going to animate today I created this on figma just to teach you this animation and I will leave a link to this file in the description so that you can use them when you try it out this is a home screen listing with filters the filter options appear on a bottom sheet right from the bottom like this when that happens the home screen in the background also shrinks in size and stacks right behind the filters with a black overlay in between so yeah this is how it will be and the first step is to create the assets which I have done right here we don't need to do anything to the home because we're not animating anything inside it it can remain like a single asset I've rounded the top corners a bit which should show up when it shrinks the filter bottom sheet is where all the animation happens hence I've separated the background from the foreground elements like the price bedrooms bathrooms and amenities which I have grouped with a button now we need to export all these elements as separate image assets here I've exported all the assets and all these assets are transparent PNG which means that all the corners which are as a part of the design are clearly visible in the assets as well next we start with our animation and to do that we go to after-effects once in after-effects we'll have to import all the assets which you have just exported so while on the project panel here we double click on it and navigate to the folder where all our assets are present we select all of them and click open this will bring all the assets into After Effects please note that these assets are not embedded inside After Effects as such but they are merely linked which means any changes that you do to these images outside in the finder it's going to affect here in After Effects it's a good thing as well as a bad thing for now let's assume it's a good thing next we'll create a composition which is of the same size as our artboard which is 1080 by 2400 it's one of those one of those long high-end Android phones let's assume for frame rate let's use 60 fps and for duration will use a duration of 10 seconds although our animation is not going to be longer than 4 seconds but for the ease of using we'll use 10 seconds and we can also give a name to the composition sort of compound we'll call it main filter animation yep that's better let's go ahead and click OK and this is the composition which is created for us so this is going to be an art board where we are going to assemble the entire UI and also animate it later so let's go ahead and assemble it these are all our images all that we need to do is just drag and drop them either here or or in the timeline directly now I'll do it in the timeline so that it automatically gets aligned so that's my home the main home page and above that will be the bottom sheet for filters but in between them there is another layer which is the black overlay for that I'm going to create one rectangle inside After Effects itself one easy way to create a tangle is click on the rectangle tool double click on it and it'll create a rectangle which is of the size of the artboard which perfectly works for us this is the shape layer one I'm going to rename it to black overlay and it's already filled with lack and it's over homepage it's fine it has an opacity 100% right now but let's not bother about that let's bring in the other elements and then let's see what can do about it let's bring the bottom sheet background and drag it all the way over the black overlay we will align it to the bottom by going to the align tab and clicking on bottom align so this will align the bottom sheet to the bottom the way it's supposed to be and after that we need to align all this we need to place all this elements of prized bedrooms bathrooms and amenities over the bottom sheet so I'll zoom in a little bit and align all these things so the amenities goes right at the bottom here and the bedrooms the second one the price was the first and the bedroom is the second the bathroom is the third and amenities is the fourth so this is the order that we are going to please these things with I'd also make sure that the alignment is correct here it doesn't quite matter but it is just for the sake of our own hygiene because it might get complicated so it's better that we align it so after bottom sheet I'm gonna go and please amenities followed by bathrooms followed by bedroom and then price right so this is our UI we have assembled it inside After Effects right now now we'll go and animate from the initial home screen all the way up to this now I do not want the animation to start at 0 seconds I wanted to start after some time you know so that a user sees or whoever is seeing animation should see the home screen for a while before seeing the animation of the bottom sheet appearing so I'll start it after around 1 second does the handle I place it at 1 second and I'll select the bottom sheet along with all the filter elements select all of them click and drag and bring them down to make sure that they move in one single vertical line I'll press and hold shift so that it's constrained now I put them down and also in the first stage the black overlay has an opacity of 0 so I'll click the black overlay here and to activate the opacity the shortcut is keyboard D I press T and it shows opacity here so which is 100% right now I'm gonna make it 0% so this is the this is the initial stage of the animation that we are planning to make now let's go ahead and animate in the animation there are three things happening at the same time one the bottom sheet is appearing from the bottom and going all the way up to top to the black overlay is changing its opacity from 0% to 70% and number three the home screen which said the background is shrinking in size and it's aligning behind the bottom sheet the filter bottom sheet let's go ahead and do one by one the easiest of them is the black overlay so let's go ahead and animate the opacity and to animate it starting at once again my handle is at one second I go ahead and click the stopwatch beside capacity and creates a keyframe here then I move 40 frames to the right and to do that I press and hold command and shift ctrl + shift in case you're using Windows and press the right keyboard button 4 times which is 40 frames now once I'm here I create one more keyframe by clicking on this thing out here and here I'll go and change while the handle is on the second keyframe I'll change the opacity to 70% now when I move the handle behind and run it through it I see it's already animating from 0% to 70% so one of the three steps is done let's go ahead and do the second step to do the second step I will select all of these the bottom sheet amenities bathroom bedroom and price I'll select all of them together and animate their position mind that my handle is in the place in the initial position of one second the shortcut for position is P I'll go and hit B on my keyboard it reveals all the positions I'll click on the stopwatch to add the first set of keyframes then I'll move 40 frames to the right again command shift and the right button four times 40 frames towards the right and I'll add another set of position keyframes here and this time we are adding while the handle is on the second set of keyframes I will pull all these things up and place them on the screen I'll ensure that the bottom of the background of this bottom sheet is aligning with the edge of the screen and when we do this you will see some sort of lines appearing these lines are nothing but it shows that there's some sort of animation which is created between these two states now when you move the handle from this position from the initial to the final position you will see that our bottom sheet has also animated so two out of the three things are done now let's go ahead and do the third step which is where the home the home screen goes and sits behind the filter button well honestly speaking for every practical purpose this filter bar coming from the bottom and sitting right where it should be completes this entire transition but we will still go ahead and do it for the home just to make it a little more interesting so I will increase the space so that I have a little more real estate to work over here now this is the home here we are gonna animate two things not just one one is the scale it's going to reduce in size a bit and secondly we will also bring it down a little bit so that it sits right behind the half guard or the bottom sheet of the filters let's do one at a time again so we select home and we will animate the scale and the shortcut for that is s so I go ahead and press s on the keyboard and it reveals scale I click on the stopwatch it creates a keyframe I move 40 frames ahead and in this I will have to add a keyframe or I can directly change the values here and will automatically create a keyframe let's try that one this time so I'll try and make it 90% yes I think 90% is good you saw the moment I entered 90 here and pressed enter it automatically created a keyframe with the values 90 so when I run the handle over this you see its scaling while everything is happening now while the scale is good we would also want to bring the position a little bit because it's little too high up in the air so for that I'll again bring the handle back to one second where I have started every other animation I select home because that's what we are animating and I will also animate the position and the shortcut is P again I held three I click on the I click on stopwatch and then I move 40 frames ahead and I bring it down either I hold and pull it or I could even use keyboard and I will use the arrow keys to bring it down yup I think this looks good enough now you'd probably be thinking that you just added a keyframe for scale where did it go it didn't go anywhere it just collapsed you know you see when you click on this you would see every other keyframe that you have added so you know you can transform anchor points rotation opacity are the other things that you can animate but to do this to reveal and to show this there is another keyboard shortcut which is you you is more like a toggle when nothing is selected you press you it'll collapse everything when you press you once again it'll reveal only the keyframes or only the rows where you have any keyframe added so in case of bathrooms bedroom and everything it was one kind of keyframe each which is position mostly positioned and in case of this learners opacity but in home you see there are two kinds of keyframes that we have added position and scale and you see both of them because you reveals only the ones where you have added the ones which are activated so here we are we are actually done with the animation now it's the time to make it a little more interesting because you know when I go ahead and play it I mean I was manually just running this slider if you just bring the slider all the way to zero seconds and press the spacebar you see this is how it actually plays I do it once again this is how it plays it's fine but it's linear so it's time to make it little interesting so what we do is we select all these keyframes we right-click anywhere of them since everything is selected we right-click we go to keyframe assistant and we click on easy ease when you do that you see the shape of all this keyframes have changed they were they were diamond-shaped before and now you would see the shape has changed into some kind of an hourglass this indicates that some sort of easy ease is being applied to it right so when you directly click on easy ease it applies some default values but I would say it's always a good idea to go ahead and tweak them right so let's do this so to do that I would do I would apply the same values to all of them initial keyframes select all of them right-click any one of them and go to keyframe velocity when I Creek on keyframe velocity you see it has applied default influence of 33.33% for incoming velocity as well as outgoing velocity now what this means is incoming velocity is effects all the elements which is incoming into this point which is coming which is ending in this point as you see there is nothing which ends here because this is the starting so what matters to us for this set of keyframes is the outgoing velocity and the influence of that so what I will do is I will not touch the incoming thing at all because it doesn't matter nothing is going to change for the outgoing velocity I will change the influence to 35 I mean of course I could have kept it 30 3.33 as well but these are some of the values which I'll like I have been using and it kind of works for me similarly for these keyframes let me select all of them I right click on them I go to keyframe velocity and I again see the same window opening so incoming and outgoing and this time the incoming matters to me because this is the ending keyframe of my composition so things start somewhere and they come and end here so the incoming velocity or the incoming influence velocity matters to me and for this and outgoing doesn so I'm not going to touch it again whatever value is there it's not going to affect my animation so for this I will change the influence value to 75 you can try out different values and see what you like now if I go and click on spacebar and plane you see it's not linear anymore it's a lot smoother you can try out different values to see how how differently it behaves or how differently it reacts to the numbers that you enter and then you can find out whatever suits you or whatever you like 35 and 75 kind of works for me I have been using it for some time and for any UI or UX related animation this just works now when you go ahead and play you'll see it's smooth it's not linear like the way it was before right this looks fine this is all was done but we can make it a little more interesting even now if you see this bottom sheet it's got four rows of things the price bedroom bathroom and amenities and right now all these four things are appearing together along with a background which is which is this one the bottom sheet background because this is a time line and when all things are placed together they start and they end together which means that the animation is happening at the same time but to make it a little more interesting what I want to do is I want the first row which is the price range to appear first then the bedrooms then the bathrooms and then the amenities so to do that we just move around the key frames along the time line because it's a time line so when you move things towards the right things appear later when you move things towards the left things appear before then the other set of things and when you just select and drag them of course you can move them around the key frame but then you cannot measure because I want things to be uniform and that's why I will measure it again and the shortcut to that is you select any keyframe beat one or you know a set of keyframes in our case you press and hold option or alt and then press the right keyboard button it will move the selected keyframes by one frame if along with that if you pressed shift as well it will move the keyframes by ten frames so right now we don't want to go ten frames so one frame is good enough so I'll go ahead and press option a lot select price because you know I want the price to appear in whichever time it is appearing I will delay the rest of the things which are behind it so I'll select bedrooms bathrooms and amenities press and hold option and press the right button twice to shift the keyframes to frames to the right now I'll deselect bedrooms because I'm done with it and I will select bathrooms and amenities shifted by another two frames sorry and then select amenities and shifted by another two frames so each of the sets of key frames are two frames away from the previous set so now what it does is it introduces that delay and that results in a very interesting motion you see that it seems some sort of an elastic or or or spring sort of animation where not everything is happening together but after a short delay and it makes it much better than before now that your bead does animation let's also quickly do the reverse of it that is when the half card opens or the bottom sheet opens let's also put it back where it was and doing that is very simple it's just about copying a few pre frames here and there so if this is where the animation ends let me just go ahead a few more frames maybe you know I press and hold command shift and 1 2 3 4 maybe 50 frames ahead and then I want it to pause for these 50 frames after the animation has happened that is the bottom sheet has opened and then I want it to collapse and go back to the state where it was that is returned back to home and to do that it's very simple we just need to copy these key frames till this point I want his animation to hold it to remain static so to achieve that I just need to copy these key frames and paste them here because when this keyframe and the values and these key frames and this key frames are same there's not going to be any animation in between these two states so I'm back here and to copy it it's simple you select command C and command V but there's one catch here you cannot select all of them and paste because if you try and do that you see what will happen if I do a command C and do a command V it's going to make a copy of all the different layers so the way a keyframe copies work is it just works within a particular layer so I'll just have to do it multiple times so I select this one command C and command V it's going to appear where my handle is right next one command C command V and for this one since the same layer has two key frames I can copy both of them together command C and command V right now we again go 40 frames ahead and now we want everything back to the state where we started which is nothing but these set of key frames so here while my handle is here I'll copy and paste these key frames here so again copy paste right so here we are done and when we copy and paste the key frames so it also retains the easing values which we have applied to these so if you remember we had applied 75 for these and 35 for these so this was the outgoing and this was the incoming so these things get carried over here as well so now since the order has changed we need to apply an incoming velocities to these an outgoing velocity to these we select all of these and select keyframe keyframe velocity and I said the outgoing velocity to 35 similarly for these I would select all of them right click keyframe velocity I will set the incoming velocity to 75 and this should bring back the waders now let's go ahead and see the entire thing once all the way from 0 that's it it's done now if you remember we had set our composition lens to 10 seconds now this is too long a video we don't want it our work was only till here so what we'll do is we'll just take the handle to wherever I want maybe 4 seconds is good enough so while it's in 4 seconds I go ahead and press the keyboard shortcut N and when I do it just trims the composition for these 4 seconds now beyond 4 seconds it'll just loop if you see it's playing and after 4 seconds it just loops the same thing now this becomes the length of your entire video so when you render it's going to render a 4 second video and not a 10 second now that I see it I feel it's a little too slow maybe we should speed it up a bit so I will just select all these keyframes press option shift and press the left button once so that I move so that it reduced the spacing between these by 10 frames and I'll do the same for these as well so I will select these last set of keyframes press option shift and hit the left key button one so that it moves to the left side by 10 frames I think this looks fine the speed is good enough so we'll trim it now not at 4 seconds since we have far made it faster I'll trim it at 3 seconds go ahead and press n here and this is our animation let me also show you how to export it now that you have created the animation to do that make sure you are in that composition wherever you have worked on the animation click on composition there are two options here one is to use the default renderer of After Effects which is the render queue the other one and a slightly better option now it says to use the Adobe Media encoder queue so it's an external render which comes with After Effects it comes pre-installed with After Effects I would say it's a part of the Adobe Creative Suite so let me show you how to do with that so I'll click on Adobe Media encoder cue and it loads of media encoder there it is there's media encoder and you see this is our composition which we just added to queue from After Effects to not touch any of these each point 264 can be the encoder and this one can remain Matt's source high bitrate if you see anything else you can always click on this drop down and pick up match source high bitrate and this is the output file you can go ahead and select where you want to save this and after you are done go ahead and click on this green button which says start cue this will render the file and voila you have your first animation ready in the form of an mp4 file I hope you learned something new today if this was your first UI animation on After Effects let me know in the comments and if you post it anywhere in social media don't forget to tag me my handles are right there in the description now that you have done a simple animation really well it's time to step up a bit how about some fancy parallax scroll on a mobile device sounds interesting because that is going to be the next thing that I'm going to teach you so stay tuned please don't forget to Like share subscribe and hit the bell icon so that you get notified every time I upload in your video if you get any doubts regarding this tutorial let me know in the comments I'll help you out this is Sapta and see you guys [Music]

Channel: Saptarshi Prakash

Views: 78,737

Keywords: motion design, after effects, animation tutorial, after effects tutorial, learn motion design, micro interaction, sapta, saptarshipr, adobe after effects, ui animaiton, ux animaiton, ux design, ui design, dribbble, tutorial, design, app animation, ui animation with ae, ui animation with after effects, ae for ui, ae for ux, after effects for beginners, basics of motion design, for beginners, saptarshi prakash, product design, visual effects, after effects tutorial beginner

Id: 8XWBgvT5kfg

Length: 26min 7sec (1567 seconds)

Published: Tue Jun 30 2020