Lottie Animation Tutorial in After Effects | Workflow & Process

in this video I'm going to be sharing how to animate a thumbs up emoji for Lottie that you'll be able to use in any website or a mobile app hey there my name is Issei and I'm an animator today I'm going to be animating an emoji I created in Illustrator and hopefully inspire you to make one for yourself now I don't have anything pre-planned I'm just gonna record as I go and we'll see where we end up but you'll be able to see my real workflow this way I'll try and explain as much as I can as I go to make this helpful for you guys if I do miss anything or if anything is unclear feel free to leave a message in the comment section and I'll make sure to explain as best I can alright let's get into it alright so I have this emoji here in Adobe Illustrator I have a bunch of layers open this isn't too important but what I basically did is I separated different gradients to different layers I don't have any groups in here I'll just go ahead and toggle all of my layers so you have an idea of the construction behind this emoji I've basically been playing around with gradients quite a bit with Lottie to see to what extent we can move away a bit from flat icons or a flat emojis into something that's a little closer to 3d but that's not really 3d so that's what I'm doing with this emoji here so I'm going to be animating in after-effects to export from Illustrator to after-effects I have this overlord plug-in that's open if you're unfamiliar with this plugin I do actually have another video that explains how to export or how to transition from adobe illustrator to after-effects with this plugin so I recommend you go check that out if you're interested now before I export to After Effects I am going to open a new composition and I believe the size that I used was two thousand by two thousand pixels now in terms of duration let me think for a second if I do this yeah that's about three seconds so I'm gonna do I'm nerdy four just to be safe and that's for the background I like to keep it like a medium gray not a fully white white so I can see the highlights and I can see the darks now we do need to give a name to this composition I'm going to call it thumbs up I'm not gonna have many compositions in here so it doesn't really matter too much what I call it in terms of layout really quickly if you're interested I don't really need this thing I'm just gonna close that but I have my project panel here on the Left I have my composition in the middle that's the most important that's the biggest thing I want to see I have my timeline down here and what I like to do is to squeeze it up and down when I need to open up all of the layers and all of the the key frames and then everything else like a line and my character stuff I have it all to the right here so it doesn't bother my timeline when I move things up and down all right back to illustrator now I'm going to be selecting everything and export to after-effects so command a to select everything click this Overlord transition button and so the first thing I usually do is I check if everything has exported correctly now what I'm looking for in particular are gradients because they do find that sometimes transfer ingredients are a bit of an issue I do think that I've spotted some of them so I already know how I've constructed my emoji and I have a bit of an idea of which ones might go wonky what I've done is the top layers are the finger part of the hand so I'm going to go ahead and turn those off because those are looking pretty good so now I'm pretty much left just the underlying hand and thumb part so I'm going to name my lair so I have a bit more visibility as to what's going on I'm gonna probably fast-forward this because this is probably a little boring for you so before I go in and rename all of my finger layers I'm going to take care of that later I'm going to go in and check my gradients on the shapes that do have gradients right now so to do that I select a layer with a gradient I go down to contents and then gradient fill I just need to select it and what I'm looking for I'm just going to zoom in here so you can see a little better what I'm looking for are these two points this one this blue point here and this one and I'm going to compare in my illustrator file let me toggle off those useless finger layers there I'm going to lock my layers and I'm just gonna unlock the one that I need to inspect and see this is how the gradient points are supposed to be whereas in After Effects they're horizontal and this one is too much to the center so you've seen me do this in my last video where I showed you how to export from Adobe Illustrator to After Effects how to fix gradients so I'm going to fast forward over that but basically I'm just using guidelines to find my points and readjust them you just probably watch and you'll get a good sense of what I'm doing [Music] I'm gonna go ahead and export these guidelines to after-effects now that I have them here I can go ahead and read rag these points we've fixed it for that layer I'm gonna go ahead and fix it for the two of your layers let's go ahead and see if there are any issues there [Music] all right so I fits the gradient issue but now looking at what I've done with the thumbs up shapes I realize that I've been using blend mode and I don't believe blend modes are supported in lawdy at the moment so basically you'll see here I've been using multiply in the screen modes on these shapes now so what I do to fix that the fastest way this is kind of a dumb solution but fastest way that I found is take a screenshot color pick the color from there and then re-import it to after-effects so I'll show you I just go command shift for take a screenshot of this because I need it to be rasterized I need it to be pick stylized so I drag that picture in in after-effects here you'll see how see how that is more orange and how this is more pink so I'm gonna go ahead and select that color basically there that's more Orange so let's go to this one gradient and select this pink color yeah I'm gonna go ahead and select that more orange e tone and so now that I've done it once I have the correct hex code here which is what I'm looking for basically so I just copy that and then I just paste it where I need it so I went in and fixed most of the gradient issues I also renamed all of my layers as you might have seen now I'm going to color I coat them very quickly this way it's gonna be a lot more easy for me to animate if I know what color means what so I'm going to assign a color depending on what part of the hand it is and the parts that we'll need the most animating I'm probably going to use a color that's a lot brighter usually I use something like fuchsia or CN all right so everything that it is finger related I colored it peach I made sure that the ones containing the thumb because I'm going to be animating that that they're a popping out color so I used CN the yellow parts of the wrist and the hand I might animate that since it might go like this so I popped those yellow since they're actually yellow colored and I need to pay attention to that little fold I need to make sure that that's going to be parented to something so I made that pink okay last step before I go in and move anything that we need to make sure that everything is parented to the right shape so I'm gonna make sure that the fingers are parented to the hand and that the hand can move from the wrist so I'm going to need to make sure that the rotation anchor point is going to need to be here and the other thing I'm going to do is I'm going to you'll see I'm going to create a null that allows me to move the hand up and down independently of any of the shapes then lastly for the thumb I'm anticipating that just this movement isn't going to be enough we're going to need you know the thumb to do a bit of this and for this we're going to need to move the path points okay so a quick recap on that I have my hand null here and you'll see that my so this is my palm base probably call it palm and I have all of these fingers shadows parented to this pump and I have my wrist shape here so if I go ahead and take my palm and I rotate it see it rotates independently from my wrist and if I rotate my wrist it rotates independently from the palm and then both of these two are parented to this null here which allows me to move around the hand as well as rotate the hand and what I'm probably gonna even do is I'm going to move the anchor point so I centered it to the center of the wrist which is close to where that palm is so now if I were to rotate it the thumbs going to go like that which is which is kind of the movement that we want to write that makes that kind of makes sense and then very very last thing just because we have a lot of layers here that I'm not going to need to animate I'm gonna want to make sure I don't see them I want to hide them so instead of pre composing which we don't really need here I just need to hide them so you can use this tool here I'm not sure what it's called it says hides all layers for which the shy switch is set so I guess it's called the shy switch and you'll notice that next to each layer if you have these controls on by the way if you can't see these controls you can just right click here next to layer name and make sure that switches is toggled on but once you see it you'll see that there's this little guy here so I'm going to what I'm going to do I'm going to toggle that for all the layers that I don't need to see I'm going to make sure these I can see and this might don't need to see once I toggle the shy toggle they've disappeared so they're still there I can still toggle them on and off it's just that I'm not gonna mess those up so now you see it's a little cleaner we only have I don't know one two three four whatever a bunch of layers okay let's get into animating now the fun part so the first thing I'm going to do is I'm gonna do this bounce movement because I want my animation to just go up down up down and notice the mMmmm see that speed I'm gonna try and imitate that before even doing any of this and any of that I'll keep this probably last so let's get the hand all open up position and rotation shortcuts for that are P for position and then hold shift are for rotation I'm gonna create a keyframe at the beginning so this is gonna be my starting point and then it's gonna go up so probably around let's start with the one second mark and I'm gonna hold shift here and go the down arrow 1 2 3 4 5 6 7 8 12 its tray 12 and then I'm gonna go to the two second mark copy that first original keyframe I'm going to trim this down and hit the spacebar and see I'm just gonna lower the quality because it's taking quite a bit of time to render there we go rendering okay as you can see that's moving way too slow so let's bring it down by a half point let's try that so before I go easing I want to add a little bounce as well so so before it goes up it's gonna go down a bit then up see that down up it's anticipation and then when it goes lens back down it's gonna overshoot a bit and then bounce back into place to move frame by frame I'm you can just hold command and then right or left arrow if i zoom in you'll you'll see better so 1 2 3 4 I've moved four frames I'm gonna go down 1 2 so that goes oh that's actually not even enough probably because my composition is way too big so that's good instead of four frames that's too fast I'm going to add four more frames one two three four see add two more frames if you want to move now so if you want if you want to move your playhead this is your playhead if you want to move your playhead from frame my frame you go come in right and left arrow but if you want to move your keyframe say I want this keyframe to move to 10 I hold option and then right or left arrow really useful shortcuts now let's do the bounce so I know that this is my zero position right so I'm going to move that to let's say I don't know here I'm gonna remove these around anyway so it doesn't really matter what number I'm setting them to right now at the moment so I'm gonna copy that last keyframe and I'm gonna overshoot it by one two three four five six copy that keyframe again that last keyframe so I did six so I'm gonna divide by two so three so this is a six shifts down from the ending position this one is three shifts up and then this one is zero let's see alright let's add some eases because it needs some speed variation so with just a standard ease-in ease-out this is what it's looking like I'm going to go ahead and start working on the anticipation first so I'm going to want it to go something like hmmm see it goes mmm it stays longer down here and then mm-hmm see what I mean so I don't know I don't know if I'm explaining this well at all so I'm gonna give it some time to slow down when he goes down here and I'm also gonna speed this this one I put a little okay that's the way to fast I'm also gonna bring this here so I can just loop this by arches at the beginning and I want this to last a little longer moved it four frames forward by holding option right arrow one two three four because I need that to last a little longer so basically I need it to move slowly up and then when it'll ends up there I'm gonna need it to stay quite a long time before it going down and what I'm probably even going to do is I'm going to create a hold frame so what that means is once my thumb it's gonna go up it's gonna hold there and then ease back down instead of going up and then already starting to go back down I need it to hold there for maybe two frames so I'm going to copy that top position move forward one two frames then this first frame I'm going to right click it and toggle hold frame so you see it's how it's changed to that it's basically holding on this side between this frame and then this ring and if you go here you'll see it's at like a flat flat line there so what I do is I keep looking at that movement and repeating it also this circle thing is really bothering me I'm gonna fix that right now see how this the borders of this gradient are going way out yeah that's a little better see you can't see the edges of the Creedy anymore so it looks more like a shadow can't really tell that it's a circle there let's go back to animating where were we we were here if you're gonna bring up your keyframes use the U shortcut keystroke shortcut okay I want that movement down to be even faster so I need to look more like a even higher peak and I actually find that a lot of human movements maybe maybe I'm not sure this is true but but from my little average medium experience in animation I've noticed that a lot of especially when it comes to stuff that's related to clicking on screens or human movements like a finger that moves and hand movements um the I find that this shape of easing will works a lot of times so if you're like moving one you know those circles that we use to indicate where your finger your cursor is when you're doing like the iPhone demo or an iPad demo I find that that you really go to who you know it usually follows this pattern okay so actually I don't want it to hold it there that long okay for now we're going to keep it to that I'm going to add a rotation to this null as well to give more of that routing movement do these sounds make any make any sense I don't know so Dook Dook Dook see that let's rotate it by fourth and then it's doing minus 4 here see how that looks let's add some easing to those rotation keyframes give it more hold there are the anticipation as it goes up make it a little more springy okay and I move on to when it comes back down so it stays that way when it rotates I'm gonna add a hold frame let's see 1 2 3 4 5 6 7 8 9 10 11 12 polled frame here for rotation right click toggle hold frame so as it comes down it's going to rotate downwards and then we want this for to eventually end at 0 right since 0 is our end point so divide that by 2 which is 2 so he goes for 2 0 just like we had the position it was six shifts 3 0 make sure you save by the way I just saved my file always keep saving as much as you can I just keep repeating it but seriously keep saving okay so I find that that is it a little too the rotation is a little too springy I find that with the rotation you really want to be as subtle as possible it usually looks a lot better so what did I do I did three and then 1.50 and I'm going to go a little softer and the easing too actually that 1.5 am I gonna bring it back to one and okay see what I've done towards the end if you look at my rotation easing see see how at the end it just slows down that's more natural because your hand is going towards zero so it's like slowing down towards the end that's the way I think about it and this is what we end up with now that one is still too springy on down so I'm gonna move the position back up [Music] and what I'm even going to do is actually at that zero point position I'm gonna bring up a guide line there get rid of all these guidelines that I don't need basically I'm going to align this guideline to this to the Anchor Point see that point there that's the anchor point of this null this is where our hand is rotating from from this point that I sit earlier so I now know that this is when it's up its gonna go down see what I'm trying to see is how far away this point is from its original position so that's too high right now [Music] [Music] see what I'm basically looking at is this this cross point just focus on that as I scrub I'll do it again one two three see how that looks okay so I think I'm gonna keep tweaking my easing I think that this needs to go a little faster towards the beginning and I think that overall that's a little slow so one two three and if you want to know the secret to good animation it's all of the details so just keep fine-tuning and tweaking and tuning and tweaking this is why I find it kind of hard to make these tutorials because there is no magic formula that I can give you in a minute or 10 seconds it's basically watching me silently repeating this animation and tweaking and tweaking and tweaking so I'm never sure if I should be fast-forwarding these parts and or if I should be going through them and explaining them in detail and talk through them so please do let me know in the comments actually I'd really like to hear what you would like because these videos are for you so would you rather I keep these videos very short and I just hit the key points and you can just watch these in like five minutes and you get the general idea or would you prefer a longer video where I show in my process and I explain my thought process and I explain why I tweak and stuff let me know and so while I wait for you guys to comment on going to fast forward as I keep tweaking [Music] do you find useful especially when you're animating icons they usually looks pretty big on your screen but if you want to gain a new perspective on this animation for example I've been looking at it repeat and repeat it repeat and I can't really quite tell you know what else it needs a trick that I find that's helpful is to zoom out so I'm going to zoom out and make it quite small and now this is closer to what you'll see on an iPhone screen or in a website especially if it's like an emoji and actually if it's an emoji and an icon it can actually be a lot smaller so I make it even smaller and see you know is the message coming across what kind of feeling are we getting is this happy enough for is the sad enough or is this dramatic enough [Music] [Music] [Music] [Music] [Music] now what I'm gonna do is I'm gonna give a little jig off to that wrist and palm now we're gonna keep that very slight I don't need the hand to go like like that cuz you know it's my like powerful thumbs up yes so just a little so I basically aligned keyframes to the animation keyframes up top here so and I'm going to push this down just a tiny bit let's see [Music] [Applause] [Music] so what I like to tackle now is be some movement it's like when the thumb goes up but this thumb like by the way you have explained its stretches a little like this and then grew it comes back see what I mean so we're just gonna so as it comes up it's just gonna stretch a little more so that we have a bit of elasticity in this hand and now that is a little tricky because I'm gonna show you here what I have if I were to move one of these half points maybe not that one see how I have several layers here that all follow the same path point so I'm gonna have to make sure that I move the path point on the initial thumb first and then I'll have to copy what I'm animating on that path point to all the ones with the gradients that have that are applying gradients to that thumb as well otherwise we'll see that the shapes are mismatched so what I'm going to do first is I'm going to turn off all of these green ones because basically those are all the gradients I'm gonna go to this palm layer and we're gonna go to its path layer so there we go there it is and I'm going to keyframe it so this is where it goes down so I'm going to add a keyframe there and as it goes up [Music] there that's the highest point right because from there it's gonna start coming down so at its highest point I'm gonna modify that path and then as it comes down here so all I need to change or all I'm hoping to have to change is just this keyframe so I'm going to select the pen tool here select your path layer and I'm gonna have to make this another color because it's yellow on yellow so I can't see those paths so I can't see those points very well I'm just gonna make it red so yeah I can see those points a little better okay so let's see how am I gonna do this these guys so the points that are on this side maybe you in this guy are gonna move a little to the left so one two I'm going to D slick this guy one two you select this guy [Music] let's see what I'm actually gonna do is I'm gonna copy this keyframe here because I want to be able to clips to UM scrub between them see how that moves okay now it doesn't make sense on this side these points off to these two guys have to shift a little bit so make sure that your curves are nice though see that little dip that's not very nice this takes a bit of time and patience but it's all in the details essentially animation is about being super OCD about details I want to see this in action okay I think that the phone needs to come back to its position here I also think that those points need to go down a little and I'm gonna want that to hold as well let's try six frames it's been too much maybe four frames alright let me add some easing to that path animation so this is what yeah right now [Music] I think it's a bit much that tip is going out a little too much [Music] and this is pretty much what we have now let me show you what to do with the path layers I'm these three shaped layers have the same path point but this wine so basically this one only contains the palm it doesn't contain the wrist however these guys let me flush that red there we go see it contains the wrist as well so I can't copy my path points so it's gonna take an extra step of me moving these points to align with the yellow points so I just need to do this once for this guy takes a bit of time but that's how it is with animation at the moment anyway so I'm just going to make sure that oops these points align [Music] [Music] okay I am also going to copy the easing I have this plug-in called ease copy amazing hooligan I highly recommend this to everyone and all I have to do basically is just select the keyframes that I need to copy the east rim click copy select the ones I need to paste to quick ease and boom we have them and now what I'm going to do is I'm going to copy these keyframes hold that click on that path keyframe where you need to paste the new path to and if we check now see how they all line alright let's play through our final animation [Music] all right so looking at it now I feel like it's pretty good it has the idea and the energy that I wanted it to have I think it still needs a bit of tweaking in the easing and the timing and it's gonna need me to spend quite a bit of time the more experienced you are at animation the better you'll get but I don't want to make this video too long so I'm probably gonna go take a break go eat some dinner or something and I'll come back to it tomorrow and with new a fresh pair of eyes we'll see if if I notice anything that I want to change or if I have any ideas but I think that for this video the idea there is enough we move hand we move the wrist we move the thumb oh but you know what actually I almost forgot let's export it and see I was gonna end the video and I forgot to export it okay so let's go and grab body moving where are you buddy body moving there you are we're gonna want to move it here to the right okay so I'm gonna select I'm going to select a destination folder and I'm going to name it um for now yeah let's render so what I do to preview my animation is I go to Vlade files calm I know that they do have a plug-in inside After Effects however I downloaded it went at the very beginning and I think there were a few bugs so I haven't reused it since but I use a lot of files calm a lot with my clients they usually want to be able to preview several versions of the animations and it's easy for me to grab a link I'll show you that very quickly so I'm gonna grab this JSON that I just exported and I'm gonna drag it to Lottie files the website there we are so if I were to grab a link for my clients this is the link that I would go in and grab and they were able to preview it as well as download it so the download button isn't here yet but they'd be able to download it or preview it with the QR code on their mobile device and there you go we have the animation in a JSON file so now you can just copy paste it into your code and you'll be able to make it interactive you know when you click it animates or maybe several of them explode I don't know up to you and I hope that this was a lot of fun for you guys or helpful in any way and hope this is gonna sound very cheesy but give this video a thumbs up if if you like this video this way I know that this is the type of content that you like to see more of please feel free to leave any comments or any suggestions in the comment section this channel is new I'm new to YouTube I don't really know what you guys would like to learn or to see from me so but if you have any tips and suggestions please let me know tell me how I can improve tell me how I can help you more these videos are made for you guys and I want you to be able to derive as much value as possible from these and likewise if you want to see more animation related videos hit the subscribe button I do have a few more videos coming up they're a bit different they're mostly going to be 2d hand-drawn animation sketching and animating basically animating an animation video from start to finish writing the story creating the characters and stuff like that so it's gonna be a little different so look out for that oh and of course if you do animate something like this based on this tutorial please tag me somewhere and Instagram or in the comments here on Twitter or wherever I would love to see thank you so much for watching this video once again my name is Issei have a wonderful day guys bye [Music] [Music] to make [Music]

Channel: Issey Roquet

Views: 10,182

Keywords: lottie animation, lottie animation tutorial, lottie icon, after effects, after effects tutorial, lottie after effects, bodymovin, adobe after effects, after effects beginner tutorial, lottiefiles, icon animation, animated emoji, emoji animation, motion design, motion design process, issey, issey roquet, trufffle, 2.5d animation, 2.5d motion, motion graphics, 2d animation, beginner tutorial, project breakdown

Id: QgAR1t24e60

Length: 48min 25sec (2905 seconds)

Published: Fri Jun 19 2020