How to Create Lottie Animation without Adobe After Effects?

welcome back everyone so into today's video i'm going to show you how to create amazing laundry animations without using adobe after effects yes you heard me right without using adobe after effects so if you're not aware of lotte files a lot of animations just head towards lotto files.com and scroll down and you will be able to see some awesome animations these are created by these awesome designers and animators which you can use it for free on your projects and this would work on native ios native android or a web app or website so pretty much works anywhere and these are created using adobe after effects so adobe after effects is an awesome software trust me it has got a hell lot of features and that is what makes it confusing so if you look at this this is the interface of adobe after effects and for a beginner in fact in my case itself for the first time when i had a look at this it looked so complicated to me that i hesitated to use it and to create lotte animations in this you need to animate on this and then use a plugin then export it so that's a lot of process and even if you ask me 95 percent in fact more than 95 of the features that are available on after effects are not supported on lauder files so for a beginner or anyone who just wants to create animations for lotte files i feel it's not really necessary to learn the software and that is why haiku a company has come into picture so if you go to haiku for teams.com they have a couple of products here the one that we're going to look at is called as haiku animator creating engaging animations for ios android or web app so it's a similar concept to the lori files itself so click on get started and you can see it's available both for mac and windows which is cool and if you go around this is the interface which looks pretty simple so you can see these awesome animations can be created so just go ahead and install it i have already installed it and this is how it looks they have got a default sample project here so let's open that up and this is the sample project you have your timeline here you have your assets here and that is pretty much about the workspace and to play it you just have to click on this play button here and there you go this is a sample animation that they have showed here so you can create pretty much any kind of a 2d animation here so let's go ahead and start a new project to see how it works so i click on new project and i would call this as loading animations because i was thinking of creating a loading animation for which i already have my assets ready so here we have a new project and this is your canvas and you have your timeline here and on the left we have three options which says sketch figma and illustrator so these are the three platforms from where you can import your assets so lotte works on vector animations and that is why we have these vector tools here so let's go for figma and if i click on that basically ask me for the project url so if i head towards figma here i already created a project and it has a loading cursive text written here so this i created using a vector path using the vector tool here it wasn't easy to create so if you could see here i had a couple of iterations and i ended up with this one so it actually doesn't look really great but for the tutorial purpose let's go ahead with this so what i was thinking was have an animation where it basically writes this letter by letter so letter by letter animates in so that is what is my expectations so i have a path here and i also have a dot which is not a part of a path but just a fill shape so these are the two assets that are present here so once you've created the assets that you need for the animation just go to share and say copy link and come back here and just give the link here say import so this is the second time i'm doing it that is why i didn't ask me any permission but if you do it for the first time uh you would actually come to a screen like this where it asks you for uh authorization you just have to click on allow access and that will bring up all the stuff that is there on your file so if you can see here i don't see the assets that are on the sigma file and that is because you need to make it exportable so if i go back to figma and i click on this one and the dot here just make it exportable that is click on the export button here and that's it you should be able to see the layers here for that just reload this so i click on the reload button here and there you go i have my assets that i clicked on export so in case you don't click on the export button or you don't make any layer exportable you won't be able to see it here so now that i have my loading uh let me just resize the frame here i think this much should be enough for the lowering that i'm creating so i drag the loading here and i put it on the center and maybe i'll try to resize this one too so somewhere around here and somewhere around here that looks good and i put it back in the center and one more thing that i have to place is the dot so i drag it into the frame and i'll try to align it exactly with the letter i here i think now it looks good so now that we have all our assets let's start animating it so once you look at the timeline here you can see that i have the dot i have the loading this is the path and this is the you know the dot so make sure that you rename your assets on figma so that it comes with the same layer names here that will make it easy to animate so once i have the loading path and the dot here i want basically the animation to load or write this letter by letter so the first frame you don't want this dot here so i make the dots opacity to 0 so the dot is gone so these are the basic properties here if you need the extra properties just go to the add option here and go to path or different things that you want to add so if i go to loading you have something called as a stroke dash array i just click on that and that will add up the property and one more thing i want to add is the stroke dash offset so i've added two properties here so this is nothing but if you go to figma you'll be able to see a property called as we go to more options here the dashes and the dash gap so that is nothing but the dash array and the dash offset here so i want to make sure that the dash with one dash it forms this whole loading so what i mean by that is if i give a value as 100 you can see this loading path has been created by multiple dashes here so i want with the single dash to complete the whole thing so keep trying so i go for 500 so almost half of the path is in the picture if i go for 1000 i think that should make it visible yes the completing is visible so let's try 900 still visible if i go for 800 you can see it's only till here so let's go for 900 itself and now that we have the whole path created with one single dash a dash offset means the gap between the dashes so in the first frame i don't want the first dash itself so it should be totally invisible so the same value you can just put it here and that will make the whole thing invisible or out of picture so there's a gap of 900 in the first dash itself that is why it's not visible so the first frame looks good it's totally empty and now i'll head towards the one second mark here which is uh here so you can also go for frames or seconds so you just tap on this and it'll toggle to frames or seconds i like to work in time and seconds so i'll go to seconds and i'll click on this one second mark here and just change the stroke dash offset to zero and that should make it visible so there you go we have it visible and i also want this dot to be visible which is nothing but the dot here so make it one and there you go we have it and now let's just play it so there you can see how simple it was to create this but if you see the dot is being visible even before the letter i comes into picture so let's just correct that so if i move the timeline here so let's say here you want the dot to come into picture so just move this keyframe to this particular time here and now if i play it it's starting on the correct time but it's taking time to load and that is because your end frame is at the one mark one second mark here so i'll move this back to somewhere here when you reach the letter n so this should be perfect and now if i click on play here you can see everything works smooth and perfect and now i want it also to go back in the same way it comes into the picture so what i'll do is i head towards the two second mark here and then i'll give the same exact properties that were in the beginning of the frame so this should be 900 and then i want the dot to basically fade away when it reaches the letter i so here yeah here you want it to start fading out so i'll give it the start frame as keyframe as one so we have a keyframe added there and once the letter is finished somewhere here i'll make the opacity to zero and there you go maybe increase it a little bit more yep so now let's have a preview of this so if i see here you can see that how awesome and smooth it works you can also change the easing options if you right click on this you can go towards the easing options and you can also edit the curve here so you can give it something like this something like this and you can see the preview of the easing here and now let's see how that works so that was pretty fast i don't want that i wanted the previous ease in an ease out motion this looks cool so you can also edit those curves and easing options okay so now that everything looks good the animation is pretty smooth and it looks cool so now what you've got to do is the next step is you know how to create the lotte files so for that just go to the project and you have export option here which allows you to export in four formats which is gif medium quality gif high quality and a video and a lot of file so let's go for lotte and let me just save this on my desktop i'll call this loading animations okay cool so i just save it and if i see my file explorer or the finder here you have a json file which is completely text and that is how lotte works and now what you got to do is go back to the lotte files and on the top just go to preview and just drop in your json file there so i just drop it there and that will load up your json file so there you go you have your animation right on lotte so you can also edit it and publish it so if you go to handoff lotte has an inbuilt editor which helps you change the color and all that stuff so that is how it works and you can copy this you can use it on your web android and ios all the code will be available here that is how you do it on lotte you can actually publish it also and give it to the public for free and one more thing that we can do here is export it as a gif so if i click on gif and i would say loading animation gif okay just save it so let's try something different with this and if you can see here that should create a gif for you there you go so let's actually use this on figma and see how we can use it and here is a demo file by figma that you get once you open your account on figma so this is a demo file here we have some login screens and we have the home screen here so let's add an intermediate screen which does a loading so if i duplicate this and let me just remove all this content here and now let's bring in our animation so there you go i bring the gif animation here so let's central line it and to see a preview of it just go to this fill here and if you move the timeline here you can get the preview what you want to see there so this one looks good and now what i'll do is on click on this one i'll create a intermediate screen for loading here so let's see how that looks uh once i go to prototype mode i just create a link to this let's say on tab navigate to okay and maybe the animation should be instant or smart animate anything would work let's try dissolve here and for this one the trigger would be for the form or the artboard put it to the next one and say delay so after delay of let's say some three seconds and dissolve or smart animate anything would work so once i do that let's go to the prototype mode here so i click on login and there you go you have your loading animation and that just dissolves into your home screen wow wasn't that a lot of animation so easy to create on haiku do give it a check and mention the link of the software in the description below also looking at this i get an idea to create a lottery animation for lazy loading but that will be another video so stay tuned for the next video too i believe that will be interesting too so that's it for this video guys and as always if you like the video please give us a thumbs up subscribe to the channel and don't forget to click the bell icon thanks for watching

Channel: Design Xstream

Views: 36,156

Rating: 4.8896551 out of 5

Keywords: how to create lottie animation without after effects, how to create lottie animation json, how to create lottie animation online, easy way to create lottie animation without after effects, how to create lottie animation easily, quick way to create lottie animation, using lottie animation as gif in figma, using gif in figma for cool loading screen, how to make lottie animation without adobe after effects, easiest way to create lottie animation, lottie animation without after effects

Id: zoBMb72UDeI

Length: 14min 0sec (840 seconds)

Published: Sun Sep 20 2020