in today's tutorial we will learn how to create stunning animations for your websites or apps that look like this without any coding just by using an online tool called ly [Music] Creator if you're a ux designer or a web developer then this one single video will help you create beautiful Motion Graphics and attract highing clients I'll show you how to create loty animations from scratch using loty files use their latest motion co-pilot and Export your work for your website or app using Lotty files finishing this course on time will get you a printed certificate my name is an mea and I educate businesses all across the world about design and technology so without further Ado let's get started this video has three chapters in the first chapter I will explain you what exactly ly files are and how how are they different from a gif or a video and how exactly do we even make them next I will teach you how to make a ly animation from scratch using key frames and shapes and in the end we learn how to export a ly file for your website or app now this video is for complete beginners today we will learn the basics of using ly Creator and if you like this episode we can have more upcoming episodes where I will Deep dive into interaction and motion design as well but before that you need to get get your Basics sorted let's start with chapter number one now you're probably wondering what exactly is a ltif file and how is it different from other formats let's understand this with an example assume that you're making an app flow where you're putting things into a card can you see this animation for a very long time this animation was either a gif a sequence of pngs or an mp4 Video issue with these three formats is that they occupy a lot of space inside an app they require extra effort for editing they play in a very laggy way and because of big file size and performance and compatibility issues most developers face a tough time integrating them in their products and to edit a gif or an mp4 you usually need softwares like Adobe Photoshop or after effects which are tough to learn for a beginner ly files solves all of these problems very easily so instead of a gif or an mp4 you can create a do lty file inside of loty Creator without downloading any software so it all happens on the internet on their web platform and you can simply give that ly file to your developers let me show you how it works all right the first thing you need to do is go to your web browser and type ly. new you will have to create an account and once you're in you will have access to creator. ltif files.com which is the ltif files Creator now this is a web app and it's all for free you don't need to download anything and it will work on almost every laptop out there so don't worry this will work on your computer now before we go deep into how this works I just want you to understand the entire user interface so let me give you a tour of every single important item in the center of our screen we have the blank canvas this is where we will actually create that animation on the very bottom you have your player controls so you can either go to the start of your animation go back one frame and what do I mean by frame mostly the animations that we create will have 30 frames in one second do you see this on the right side you see this FPS thing this stands for frames per second and right now this thing shows the duration of my entire scene so the way this works is that you have this one single scene within the scene you have bunch of elements coming in and you can set a duration of that one single scene and it can go on Loop right so if you have a 3se second scene if the first frame and last frame are identical when it goes on Loop the viewer will not even know when is the animation starting and ending and that is what happens in a bunch of loading animations then you have go forward by one frame go to the very end looping just for your own preview and then you can also preview your animations in the player on Hover you would realize that for every single action you can see the shortcut as well so for preview in player you have command P now on the very top we firstly have our main action menu where we can create a new file make a copy of our file or go to our Dash dashboard now what is the dashboard it basically gives you access to all of your files in one single place and it also gives you access to a lot of free tutorials a bunch of their premium animations that you can just download and edit if you want to go deeper into the documentation they have a developer portal that will have all important ltif file documentations and step-by-step instructions of how do you include these in your app then we have the move tool which is pretty straightforward and if I were to insert any specific said right so you have this get started menu if I simply take this Bell and put it in the center by default I will always have the move tool enabled now there's one more thing which is called move anchor and to explain this let me show you how you can create a shape so right next to this tool we have all of these different shape tools right and let's just say I go and enable the star tool I'll simply drag and if I hold my shift key I will create this star in a uniform manner right so let's just assume that I want a bunch of stars right on top of my Bell right so I'll take this thing right here and once I have selected a shape You' notice that there's this small little ellipse right in the center of my shape and this is called an anchor point now Imagine The Anchor Point being this center of gravity for all of your shapes if I rotate my star you would realize that it is rotating making sure that the hook the fixed point of my shape is in the center so this Anchor Point is technically that hook now if I were to select the move anchor option and drag it to maybe this corner now when I rotate you would realize that my star is sort of rotating towards that one single midpoint and if you don't want to change the anchor with your own hands on the very right side under the properties panel you can realign your Anchor Point in whatever way you want so it just becomes really really simple and of course in the upcoming videos we will understand why does this even matter but I just want to show you how the anchor and Anchor Point even works next to our shape tools we have the pen tool which basically means that you can create your own custom shape so I can just create a Clos Loop and as soon as I do that by default I would have a black stroke and a gray fill on the right side once you scroll on the very bottom you will have the appearance properties that we will cover in just a few minutes but basically you can add a solid color or a linear gradient or even radial gradient and you will be able to change their Alphas so when I say Alpha it basically means the opacity of the color if this color is fully visible it means that I am at my 100% Alpha which means that it's 100% opaque and if I were to go back here and reduce this Alpha you would realize that my stroke has almost disappeared right but uh let's just cover the basics for now we have our hand tool that basically allows me to pan around we have the zoom in and zoom out option uh you can always always use the shortcut key because it's way way faster and on the left side you can also upload your own assets so technically all of these animations do require vector graphics so you can either upload your own assets which is supposed to be an SVG file or you can choose something from the loty library as well so if I go and say open this from a specific URL you can go to the loty website and pick any free animation and just paste the URL it would have everything imported very very easily now if I go and click on Discover animations we will have a bunch of free animations that I can easily use we will get into this in a while the duplicator feature helps you create multiple copies without spending too much time the kinetic typography panel allows you to add text so if you want to say alarm and let's just say I want to have a very specific font right here maybe choose an interesting color you can probably just you know choose something that fits your Vibe you can also use the ey dropper tool and maybe choose something which is from the color scheme as soon as I do that you would see that I would have my text inserted as a vector file right so sometimes if you want to add text in your animations you can do that as well very very easily one of my most favorite features is AI promptu Vector so sometimes when you're going through their Library you can't really find something uh which suits your needs so you can basically say give me a big heart with glitter s right and you can always choose a specific type so it can either be a flat icon or a logo or an illustrated scene or a UI set I would probably go with flat icon as soon as you click on generate you will be able to create your Vector from scratch which we can further animate using their motion co-pilot so I don't even have to go through the entire complication by the way this animation right here is also a loty file so you can obviously see how smooth and seamless it looks when you use it in your product once your creation is ready you can simply click on insert and it will be added to your canvas and then in the end we have motion co-pilot which is by far my most favorite feature simply because I no longer need to animate small small things on my own I can simply select any of these items and say make it shrink super fast and come back and simply press enter so I don't have to manually edit all of these items one by one right so I can have motion copilot just show me how the animation would look like so I have this preview right here what I will do is I will make sure I selected the right layer and then simply click on this icon and once I do that and close motion copilot you would see if I click on play button right here that it is shrinking it very very smartly now of course I can scale the entire thing sort of keep it right here uh change the key frames in a way that is comfortable to me it all depends on how you prompted all the details that you put inside your prompt like always now on the very right side we have a bunch of different alignment options if needed you can always keep things very very simple so let's just say I go back to my Discover animations and let's just say I take this gift box right here so I can simply drag it to my canvas and put it this way and what I can do is I can go to one of my animation presets and you have in you have highlight and then you have out basically if you have something coming into the frame these templates would work well for you I can simply select slide in bottom choose fast and apply preset and once I do that you can see that my gift is now popping in and it's sort of you know just uh showing this happy Glimpse right now you can notice how I have this groovy gift right you see this icon right here if I click on this Chevron you can of course see that I have my key frames ready but if I double click on it I will be taken back to a sub scene right so this is my main scene but then within my main scene I have my groovy gift now if I want to individually edit any of these elements I will open up my subscene where I can individually edit all of these outlines right so if I click on this I icon you would realize that I will be able to change all of these things one by one now this is extremely valuable because if you were to notice if I go to my properties panel you can realize that if I click on any of the these groups I can individually change how they look right so maybe if I want to change the color of this box I can simply go and one by one change all of these elements right I can choose the eye dropper tool maybe I can make this a bit darker uh maybe go to the top one and again go click on the ey dropper and choose this color right here so now in this case I have now Chang the gift box maybe you have a specific brand color right so in all of those cases uh you need need these modifications and it just becomes so so easy to make these assets branded according to your own guidelines now the way animations work is very very simple and for that you need to understand the basics of key frames I will go to my shape tools simply select a star and let's just say I want to shrink this star right so I will go here and do you see all of these different transformation options do you see that there's this diamond symbol right here if I click on ADD key frame You' realize that I I have now told ly creator that this star has to be at this specific spot now if I click on any of these three dots you would realize that I can change scale opacity rotation basically any of these options right so if I go and click on scale I will now see those options right here and if I click on this toggle right here it would just delete the key frame but key frame is just me telling the Creator that this is a fixed location and fixed size and eventually with another key frame we will make changes to it it right so if I go here back again to these icons and click on scale let's just move a bit ahead maybe to say 1 second and I can just move the star Right Here and Now what I can do is I can click on the Chain icon so that we scale proportionately and maybe we can just take the star and just keep it here in the center so you notice that it's just animating right now I can always take keep the star here at the bottom so it would just probably scale in that way and sometimes you would notice that it's glitching a bit that's because I've added two key frames that are tooo close to each other so that's a very very common mistake that people make right and I can also go to a point where I can add an opacity key frame as well so by default it can be on zero opacity and once I come to second one I'll just make it 100% right so it would just fade in right it would stay for a while and then I can probably take this key frame copy it and paste it here and you just need to make sure that you allow the pasting so I can take these key Fram and very easily use my shortcut of command C and command V to paste them together and what I can do is I can choose my main scene and say that my duration is just for 3 seconds so I can basically trim the entire thing to 3 seconds and if I select the looping feature so right now it is disabled but I can enable it and play it You' realize that the star would sort of come and just Loop now what you can also do is that you can keep these states for a second so maybe I can copy and just put these things right here and once I do that the star would come stay for a second and then go away right and of course you can move these around very very easily so what you can do is you can sort of put these things here I can probably take these ones and put them here as well and now what we'll do is that we can shrink the entire scene and now when I play it you'll realize that the star comes and just goes away right so it's just a very very simple way of adding more life but as I said moving forward you won't need to put in so much of effort in adding all of these key frames because eventually motion co-pilot will do all of it very very easily now one very important thing to note is that you need to organize your files very very clearly so I'll just put this as say stars and you don't have to save any of these files because obviously this is running on cloud now the important thing to understand here is that all of these animations add a lot of visual relief to your experience right so you you can either use assets from your own apps and put them in loty Creator and then use motion co-pilot to add life to them otherwise you can always use their premium animations and we will eventually understand how do you export them so once I click on export it will be exported into this new format called ly format which is way lighter than your gifs and MP4s but before we get into the exporting part I just wanted to make sure that we cover the basics so with that we finish chapter number one and in chapter number two we will create our first loty animation using basic shapes and assets all right so the most common use case that people like is either loading or like an achievement symbol right so what we can do is we can take this one right here like a trophy and what I can do is I can put it here on my canvas and I can also take this loading animation right here or let's just say I'll go to search I'll probably search for for the word loading and let's take this simple one so what I can do is I can first put the loading symbol right and let it stay here and as soon as the loading is done we can simply extend the scene duration so maybe I can extend it from 3 second to 6 second I can take my trophy and probably just show the trophy right so my goal here is that maybe someone is creating a gaming app and then the loing disappears and then you have the trophy coming in right so it it the entire animation becomes like the single thing and I will choose my main scene and make sure that the duration is just you know uh 4 seconds so I'll just go here and select four and what we can do is we can probably put an opacity key frame right here so I will make this at 0% I'll move say a few frames ahead make this 100% then go again to my ending of the animation put another key frame make it zero go here make this 100% so what is happening right here we go from 0 to 100 it loads for a while goes from 100 to zero and then you have your trophy by the way when you see these dots it basically means that there is transparency here so there's no color here right now I want this trophy to come but also move out right so I can simply go to my animation presets now I can choose any of these pre-made filters but I would strongly recommend you to use motion co-pilot for this right so what if I want this to pop out and fade out right now it's extremely important that you don't just type the animation effect but you also say add pop out and Fade Out effect right and what you need to do is you need to select enter And while it is thinking about that animation just make sure that you have your trophy selected so you can see how it is sort of fading in and then it sort of Fades out now of course it's not necessary that anytime you put in a prompt you would get exactly what you want so it's like an iterative process now in a lot of cases you might get 80% of your ideal animation from motion co-pilot but you can always make your own changes right so that is how you and motion co-pilot can work together to make really really interesting animations now if any of you have worked with After Effects you know how difficult it is to make something like this and Export them into a gif and sort of you know send it to your developers because number one After Effects is just too complicated to learn in the first place and you need a good enough computer to run it smoothly now one important concept that I wanted to show is of the parent and child so when you look at this specific scene right here you would realize that if I double click on it I would enter a different subscene now when I come to this subscene itself you would realize that I have one shape layer and once I click on this accordion I have more objects inside of it this thing right here is called the parent layer and this thing is called the child now the reason why I'm explaining you this is because if you make any modifications to the parent layer it will affect the child but if you make any changes to one of the children it won't affect the other children so it's a very common concept that we see in any other tool out there but I just thought I'll let you know that this exists here as well the next thing I want to show you is trim paths so what I'll do is I'll select a star again because that example is my favorite and let me just keep this star right here in my poly star you would realize that I have a child which is called star path now on the right side we have a bunch of different options where I can make this star sharper you know you can change the Border ADI whether it's the internal border ADI or the outer border ad so let's just say I want to have something which is just sharp and I can also add a bunch of vertices and if I click on convert path I can simply go to that dialogue and now the crazy part here is that if I select trim path you would realize that I can actually remove all of these parts one by one so can you see what what's happening it's sort of like creating this jittery effect it's almost like it's writing down all of these things one by one now if I go on edit path again you notice that it has converted this into vertices right so can you see how each vertice is now available for my editing and I can trim these paths again in whatever way I want now of course the trim path feature is useful in many many ways sometimes you just want to have a very specific object appear with time right so if I have my rectangle right here and let's just say I want to add a stroke I can simply make sure that this stroke appears in a specific duration so if I go and click on convert path let me just select on don't show this message again I can simply select trim path and can you see how it's appearing now of course sometimes the appearance might look weird simply because you don't like the way the fill comes in now in cases where you don't want a fill you can simply go to appearance click on the Kebab menu and delete the fill now when you go back to your path you would realize that now when I trim it it is sort of creating this very interesting boundary right so you can actually have shapes come into life very very easily so let's just say I go to any of these shapes let's just say I go to this gift right here right maybe I take this gift maybe I want to scale it right here now the cool thing here is that if I double click on this scene I will enter in my subscene and of course this thing has like a bunch of outlines right so if I just want to show show you something uh which is just for a specific use case I can go to any of these groups or maybe go to this label right here and go to this path right here and once I do that I can click on edit path and then go to trim path and then just change it this way so can you see how it's sort of like coming together because all of those vertices are following so when I say trim start it is basically helping me move the starting point of those vertices when I do trim end it is helping me move back so by default it is always 100% at the end but once I reverse it you would realize that it is going back to its starting point so there's a lot of interesting things that you can do and in the upcoming episodes we will understand how do you even use trim parts how do you use it in ways where it makes more sense in the experience but in today's session I just wanted to show you how you can take a basic shape and how you can edit it as a path where you can take different vertices and then how can you trim those paths now not of this would make sense until unless we create some examples so let's start with something which is very very basic let's create a heart animation so let's just say you're trying to make a like feature right and you want to have like this hot thing right here and basically it just looks pretty simple right now what you can do is you can always add some stars or some glitter sort of a thing right so you can always have you know a bunch of these templates coming in I can probably overlay both of these templates on top of each other right so when somebody body clicks on your heart uh it can basically come up in this cute fancy way so my heart can come here I can probably put it this way and maybe the heart can come in the center and then once I play these together you would see that there's this pulse right but the pulse should be behind my heart so let me just take my heart and put it here on the very top and I can always align it so let's just say I take these Stars I align those as well and let's see how it works now can you see how my scene is longer than my animation what I can do is I can choose this point and I can always extend my heart and go here and select my main scene and this time let me just put the duration to two and let's see how it looks now so it sort of just comes by the way by default what I can do is I can just go to my motion co-pilot and say add fade in and press enter so now my heart would sort of like just fade in because I don't want it to completely come instantly once you've loged your preview I will simply click on apply animation and then you'll have your heart set once you click on apply your heart will then fade in very very easily okay so now we have uh something which is quite interesting so you can see how we have one animation added to the scene and then you have some more animations right inside the heart as well right so when I go to my love shape uh you would notice that I have a bunch of key frames that are already added right and I really like how the stars look so this is pretty sorted let me rename this file as heart as well now do you remember that at the very start of this episode I told you that you can actually win a certificate delivered right to your doorsteps what you need to do is you need to create a basketball animation and let me give you a hint of how you can do it so what I'll do is I'll go here and create a new file so it would open up into a new tab let me close this popup right here now you can either use AI promptu vector or you can simply go to discover animations or you can always you know upload your own assets I would be really impressed if you put your own assets and if I go and select basketball you realize that there are a bunch of basketballs right so I want you to create like a nice bouncing basketball animation but from scratch right so can you see how this one has like a shadow but even here the animations are slightly too slow and you can also see that the lines are also extending I want you to make one from scratch now it can be a basketball it could be a soccer ball it could be an ellipse as well but what I want you to do is that I want you to use this specific feature where you can take any object you can either use motion copilot or use key frames on your own and just make a very basic animation now to win a certificate you need to do three things you need to document all your learnings from this video in simple language and comment them right below then you need to create your first slotty animation and post a screenshot of your loty creator file for example this thing right here is my loty Creator workspace you can simply take a a screenshot you can export an mp4 of your ly Creator file and post it on LinkedIn or on Instagram and then just tag me and lty files and just make sure that you email a link to your social media post and a link to your ltif file to Aditi an.com this competition is open till 15 days from now you need to send your entries on time top 24 students will be selected this competition is valid for viewers living in India more details are in the description and pin comments now now there's one thing that I wanted to discuss which was around animation presets right so let's just say I create any of these boxes I have three categories right and we discussed this in chapter one that we have in highlight and then out when I say in it basically means that I can choose a speed and basically decide how my object would appear when I go to highlight I can basically have more elements to sort of add more flare right so sometimes you don't want the object to go away you just want to add some sort of an effect right so it can just stain that spot and do something to get more attention and I can go on out again and simply select something like slide out to bottom so that way when you use all of these presets together you can not only have things come in but you can have your objects behave in a specific way and then easily transition out of your frame now I'm pretty sure you're wondering an once we have created all of these files how do you even access them for that you would have to go to your dashboard and this is how it would probably look like so if I go to any of my previous files I just have to click on them once and it would open up this preview right here now this section is extremely powerful because this is where you can collaborate with other team members this is where you can actually test how your file would look inside your app using mockups what you see here is actually your final scene one important recommendation is that before you see your files here in your preview panel make sure that you create a scene out of them what do I mean by that when I have all of my ellipses and boxes ready let's just say I have one rectangle I have one ellipse right here what you need to do is you need to select all of them right click and select create scene it's just a good recommendation because then all of your files remain in one single place and then once you have created everything into a simple scene make sure that your duration is also sorted so that it looks good when you're looping in you don't want any extra gaps and then you should come to a preview for your export so now that we have understood how to create your first Lotty animation let's move on to chapter number three where we will understand how do you export this let me give you a tour of everything that is happening here first of all I can see what project that I'm working on if I go to search I can search through multiple files if I click on my dashboard I'll go back to where my files were if I click on premium animations I will have access to a bunch of interesting uh you know visual effects and Motion Graphics that I can use this is not available in the free plan so if you're an individual you can get the Pro Plan for $20 per month let us go back to our animation if I go to my Pro profile I can always have my public animations I can also have my own collections so if you've been you know downloading or liking any specific files you can always access them by the way if you go to LY files you can always find free animations as well so it's not necessary for you to just use the premium ones let's just say I've searched loader here in my filters I can only select free and then I can edit any of these files right inside my loty Creator so you can take any of these loaders and simply add your own color to it now you you can obviously see how I can see my frame rate which is I think 60 frames now right in the center you can see my animation there is no background at all if I go to my comments I can see my team members putting any comments I haven't added someone here so if I click on share I can actually add my team members so they will have access to either edit or just comment if I go to color palette this is a very cool feature I can actually switch between different color palettes right so if you have one animation that you want to use use across different brands you can create those pallets and see how your same animation will look across different brand themes now if I click on handoff and embed this is where all the developers will find every single resource and plugin that they need to embed their ly file into a website or into their apps or whatever it is that they're developing so you will have your embeddable HTML code you will have all of the documentations that you need for iOS Android vix vlow all of their plugins and Integrations are also available in one single place so if you're creating a website either on framer or vlow they have dedicated plugins that help you access loty files right inside your workspace so you don't have to escape now when you go to transparency grid you'll understand what all is going to be transparent in your animation you can always check out with different background color so if I switch off transparency grid and maybe check it you know with a bunch of different background colors you'll understand how this animation would look uh you know sometimes because you want to check how it would be accessible across different colors now once I close this what you can also do is that you can select test animation for mobile and you can scan this QR code using the ly files app and actually see it in your phone you can also test this animation on multiple devices and you can test it across multiple players as well right so when you create animations sometimes you just have uh to use it in different different formats right so loty web is a different format then there are different versions within ly web as well so it completely depends on how you have coded the entire website it sort of depends on different versions of your app or your website premium users have this cool feature where if you have a bunch of animations you know that need review or they are approved you can always put those statuses as well if I click on segments and mockups you will be able to see your exact animation on a specific device so if I click on ADD mockup I can actually see how this exact file would look on a mobile how it would look on a desktop how it would look on a tablet you can change the background color as well so there is like so many things that you can do to make sure that you don't make any mistakes once you release the final app if you click on download and Export by default you will be able to download the loty Json file but if you want your file styles to reduce even further you can have the same animation at a 19% smaller size than your loty Json by using the optimized Lotte Json and if you use do ly again there's a very very compressed format but even within ly you have a optimized ly which is 70% smaller than ly Json and of course when you're doing your entire social media post you can always download the same animation in an MP4 format Sometimes some people also require a Web format or a JF format so all of those things are available as well in case you specifically need them once I click on share just below invite others I have an option to share this with anyone so if I click on enable sharing link I'll get a URL that I can share with anyone but it always have an expiry date so please make sure that you if you want your link to stay for another 7 Days uh you need to upgrade to a better plan I can also publish it to the community where other people can also use it and if you click on hand off and embed you'll realize that you have all of your embeddable URLs and your iframe code easily accessible to copy let me know in the comments sections if this video helped you and if you'd want more detailed videos on Lotty files where we can go deeper into motion design and interaction design make sure you finish your homework on time because you can win a beautiful certificate that to without paying anything if you're here for the first time make sure you click on subscribe and hit the Bell icon right now so that you keep learning with us more than 80% of you are missing out on our videos because you still haven't clicked on subscribe we regularly make free courses on chat GPT prompt engineering mid journey and a lot more we've been training companies corporations and institutions all around the world and this YouTube channel is there to help those students who cannot attend our live sessions we've launched free platforms like how to prom. in to learn about Ai and learn uiux doin to learn about figma product design and Design Systems with that being said I hope that you're taking care of your mind and body this is your those ancha signing out if you want to learn web development or app design for free then these two videos right here will help you get started I've explained all the basics from scratch