Easy animations with Lottie

you know that animation can elevate a website from uninspiring to delightful but motion design has traditionally been complex timec consuming and it produces these huge files that blow websites and increase load time so in this video I'm going to introduce you to Lotty files and loty Creator tools which not only simplify the process of editing and creating Vector animated graphics but also make them super easy to deploy into your website so head to ltif files.com sign up and then just click go to dashboard and within Lotty files we can organize our files and folders in this left column here and then we're prompted to get started we can create an animation which is what we're going to do in a moment or you can upload an animation so these can be in Lotty format or you can upload video files that you've created maybe in something like after effects or Jitter and then you can reduce the file sizes convert them into Lotty format and then simply download them and then hand them off to a developer or just embed them into your website using the plugins there's one natively in web flow and also for framer and elementa and other tools like that so lots of options to get that straight into your website and have a small Vector file that's easy to deploy you can see here there's also a bunch of uh Community animations so you can select these and within Lotty files you can make very basic edits like changing the color selecting certain parts of the animation as segments uh before you export but that's all you can really do there and there's a few more controls in loty Creator so let me show you around that so we're going to click create an animation with Lotte Creator you can also go straight to this side and we have here this white rectangle let me just hide these options on the side here by clicking on that get started tab to hide that so this white rectangle is our canvas it's indeed a square at the moment 500 by 500 and we can click on this percentage number here to zoom to whatever size we want and we see shift one is the shortcut to get back to 100% okay so let's try and do something semi-useful here so you can learn how to use this program so I'm going to upload some type and you can start actually with any SVG either open animation from a URL if it's already a Lotte or here we can just browse for an asset on our computer and it will bring this straight into our canvas now you can see this is larger I want to I could just scale this thing down by dragging these handles or changing these percentage scales up here but I want to actually change the canvas size so I'm going to click in this area outside the canvas here just to deselect that item and then we have some options here in this properties panel on the right column for our scene so this at the moment is a 500 by 500 canvas I'm going to change that to 1,00 by 1,000 and you can also type in you know exact figures if you want it to be something different here and then I am going to click on this shape player and then I have these align properties so I'm going to align it to the horizontal and vertical center of our canvas now I'm going to click to the side of the canvas again to deselect and you can actually change this background color here if we click on this and you can just select any of these sort of options here drag it around and uh just select a color that you want so let's pick this kind of very bright yellow and then just click again to the side of the canvas to deselect you can also just show and hide this background layer with this eye here so you can see transparent you may be able to see there's little dot grid here so these are by default trans arent but we can add in this little background here this now is for people who are not familiar really with animation or motion at all and I want to show you how you can take your first steps in this world it's not scary it's just simply a lot of Stills one after another that's how our video works each frame is like a different still and together produces a moving image so we have along the bottom a timeline so that's just how uh the time advances through as we C click play we can you can see this red playhead moving from left to right just as it would in an audio file or anything like that so each one of these as we drag along one at a time is our frames you can see here it says 0 S 1 F so that's 0 seconds one frame and we can just drag along and see the number of frames changing that so let's bring something in and show you what we can do with Lotty Creator let's rename this file first hey we'll just call this motion and even if you don't have t this type just make something up you can add uh type s using this type tool on the left or just draw some lines or something but I want to add some circles here so if we go up to the top toolbar where there's a rectangle there's a down arrow next to that click that and then click ellipse and we can just click and drag now on our canvas and drag out an ellipse now if you hold shift it will maintain the proportions as perfect circle or if that's already selected if you've already got those width and height properties uh linked together you can press shift and then it moves it back to uh the ellipse so it kind of just flips the so then once we've got our Circle here which is currently blue I'm going to change this to 100% black which is already there within the document we can just drag down here again click off to the side of the canvas I've got this little circle and I'm going to put these within the counters in the O's so let's zoom in a little bit click on the percentage change that to 200 and I'm just going to click on onto this shape and holding the mouse button down drag into here now this is a bit big so I'm going to hover over this corner till I get the scale tool holding shift and scale this down a bit and I'm just going to put it roughly in here just to eyeball it so it's got sort of a similar sort of um margin around this circle now you can see this ellipse here has now been added to our layers on the uh bottom in our timeline above the shape player which is the type now I want to duplicate this so what I can there's a few ways I can do it but if I click here on the bar on the timeline itself which has selected this ellipse I can press command D which just duplicates this ellipse and it selected one of them you can see one is green and the other two are grayed out and now I can just uh click and move this thing but what I want to be careful to do is that I'm not hovering over like the rotational tool cuz if I click and drag now I'm going to rotate it I need to find there those crosshairs then I can click and move this thing and I'm going to eyeball this again to be somewhere around the right place here uh from the bottom of this okay fantastic let's take this back to 200% so now I've got two ellipses within our composition and what I want to do is get these things to move now there's a few ways we can do this in Lotte Creator we can click again again you can either click on the item within the canvas and it comes up green on the timeline or you can just click on the bar of the item the layer on the timeline and it will also select it so it's now selected the right hand one here now there are some animation presets if you click into the right column properties panel here and you can click on these things to allow this object whatever it is to to fade in to move from the bottom the left the right also to do out or highlight so it will pulse by just scaling these objects so you can rotate them around um and have them move in and all this kind of things so there are some quick presets you can do here but I want to show you uh how we can move things around on the timeline a little bit more granular to animate this first of all we want to go down here to this ellipse and there's three overlapping circles here when you hover over it says animation toggle click on that and then you see the properties that we can adjust the position of the object the scale the size of it its opacity how transparent it is and the rotation to spin it around so if we click on the first one position you can see now on the timeline if we just close this little popup menu that it's made this shape here and this is a key frame now in animation a key frame is a particular particular frame within the timeline where you set parameters for and then between between two key frames the software does what's called a tween it it moves the object between those two places what I want to do is we have this key frame here and then I'm going to click and drag this red triangle play head here over to two seconds exactly and zero frames and then I'm going to press this empty Diamond here and it creates another key frame at this point with the ellipse in the same position then I'm going to drag this play head back towards 1 second and create another key frame here now there's also a shortcut for this which we saw um when we went to this animation toggle which is p so if I just press p on the keyboard it also creates my key frame here and I want this to move up and down down Within These counters so what I'm actually going to do is click on the other one and see what was the Y AIS property so the vertical uh position of this element so what I'm going to do is click on uh that one as I have done I'm going to bring my play back to the beginning and I'm going to add a position key frame here so I'm going to press P again and there it is and we can see that the Y position is 432 so let me go back back to this 1 second key frame and I'm going to click on the actual fill Diamond here and then I'm going to change this to 432 and it should move now to the top yes and I just press tab after entering those numbers okay fantastic so now I want to do the same thing with the one on the bottom I'm going to click on the rectangle layer on the timeline still over 1 second press P it's made me a key frame I'm going to click here I don't actually have to always drag the playhead I can just click uh within the time bar at the top where we see the second numbers there and I'm bang on two seconds and I'm going to press P again and I'm going to change the position of this um middle one to the top position of this which is 568 so drag my playhead back to 1 second click on this particular key frame it goes to a solid green and then double click on this number for the Y value type in 568 Tab and you see it's moved to the bottom now I'm going to drag this play head back to zero and then turn off Loop and then click play the shortcut for that is space we can see these things move up and down but then they stay in position after 2 seconds and I want this thing to keep looping so I'm going to click off my canvas to deselect everything and I'm going to change the time here the duration of this by clicking on the actual time here and just changing this five to a two pressing tab now you can see my timeline is automatically adjusted I've now got a 2 second timeline for this file then I'm going to click on Loop and then I'm going to click play you can see this thing keeps moving so that's basically how you can animate things and like I said you have all these other properties in here uh like scale opacity so you could have the thing Fade Out fade in and all this kind of thing now let me give you a little tip cuz I'm guessing this video it's aimed at people who are kind of new to motion and animation when we have things move like this they're moving in this very linear way that is a certain look but it doesn't really mimic physics and how things move in the real world so I thought it might be cool uh to have a little bit of shape to the way these things move so they don't move in this linear a pace always at the same Pace up and down through here so what I'm going to do is we go up to 1 second here which is 30 frames we've got 30 frames per second because if we move back one frame you can see there's 29 there also if we click off to the side of the canvas it tells us there our frame rate is 30 frames per second so let's move the play head to 15 frames per second and then I'm going to select one of these ellipses it's the right hand one by clicking on it at the bottom here then I'm going to press P to create a key frame what I want this thing to do is move a little bit quicker through the middle part of the journey that it has through here so actually it's probably better if I have a point before and after thinking about it so I'm going to get rid of this key frame I'm just going to press command Zed and it goes back on the last thing you can also click on it and delete it so I'm actually going to set a key frame at 10 seconds press p and then one at 20 seconds and press P so let what we can do is we can also click on the red and hold down our Mouse button and drag this play head along to see how this thing advances so we would want it to maybe have traveled a bit less distance up to this point and a bit more up to this point so that it can move quicker through so this has traveled less distance so it will be lower down so let's change this 523 to 543 and then let's change this second key frame I'm going to click on it and it goes solid green from 478 to 458 so we want that to be higher up now so if we go back to the beginning here and then we click play we can see through that first up um movement it has a little bit of speed through the middle but we've not done it on the down movement so we need to do the same thing again so let's go to 1 second and five frames click P then let's go to 25 frames sorry that's not what I did last time I did 10 didn't I so one and 10 frames click P one and 20 frames click p and this one here I want this to be which way are we traveling we're traveling down so I want it to be a bit further down so it's going to be a higher number so I'm going to change 523 to 543 then I'm going to go back to this first one and I'm going to change 477 to 457 now if we click play and you can see the difference on the left the circle is moving in that linear Fashion on the right the circle is moving faster through the center maybe it's a little bit too much maybe we'd want it to just slow down in a bit more of a natural way so we could maybe instead of you know adding 20 to those numbers we could have just done 10 uh but it demonstrates the kind of thing you can do if we Zoom this out to 100% so we can sort of see the composition something like this created very quickly even with me taking the time to explain it um very very slowly now whether it's something you've uploaded or whether it's something you've created like this all we need to do now is export this Lotty and save the actual file and then we can upload that and deploy that into our website if you click export here it will launch your webspace and you see it's done it on this transparent background so that yellow is kind of just for us to to look and see how it goes you can choose which folder that you want it in we're going to call it motion we click save and it saves this into our Lotty files workspace so whether it's something we've created in Creator or we've loaded here from uh the Community Options uh from from one of these things here either way um it will go in here so let's just go back to our motion file and you can see here how optimized these are so this Lotty here is only 1.7 kilobytes absolutely tiny compared to a video file of something like this like if it was an mp4 now you can export it to these other formats if you just want to create things in in Lotte Creator these video formats but from here we do this now all you need to do is Click download and you do need one of the plans to do this and you can see the prices here and then once you download that file that can be imported native L into webflow framer elementa Wix lots of other options to get it onto your website if you were bringing something in here just to demonstrate the options are uh much fewer on what you can change there is a color palette button here uh and you can click on these preset pallets and it will just change now obviously we've got everything in one color so it will just kind of change you know this one thing if you had a few elements it would kind of intelligently figure out what color you wanted you can also here just create a new palette so say uh this pink is your brand color you can save that and then click on that and then have the option to just change it into that color the one other thing you can do within files that is relevant is to segment things so if you click here on this uh button here segments and mockups and then add a segment what you can do is actually choose which frames you want it to cycle through here and whether you want to Loop or play once so for example if you've got something uh which animates one way on load and then when you hover over it it does something else or it plays the next stage you can set that up here and then you can also add comments in here to tell your developers how you want them to deploy that perhaps pay attention to the segments uh that you've established here the one other way to get it onto your website is actually through these embed links you can actually enable an asset link and this will be uploaded on uh Lotte server and through that that can also be uh embedded here you can use iframes you can use a loty player and that's another way to integrate them into your website let us know in the comments if this looks interesting and what ideas it's inspired how are you going to use lotties in your website so until next time happy designing

Channel: Flux Academy

Views: 3,453

Keywords: web design, animated website

Id: NOvcy64apD4

Length: 19min 55sec (1195 seconds)

Published: Tue Apr 23 2024