Motion One - A Lightweight JavaScript Animation Library

Key Takeaways

I suppose I've been living under a rock because the last year a new JavaScript animation library was released called motion one it's by the guy who made framer motion and it's really lightweight compared to Alternatives like anime.js and green sock and it's based on the web animations API so in this video I'm going to show you how to get started with the really simple scroll based animation so let's get going if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy alrighty so to get started as you can see I just have two pictures here in an empty folder otherwise so we have no code we're going to start this thing from scratch so uh the first thing I'll do is start in index.html we'll hit exclamation point Enter here in Visual Studio code for some boilerplate we'll link CSS main dot SAS yes this time we're going to specify a SAS file because we're going to use a bundler um parcel all right and parcel can accept SAS here in the index.html let's create those files real quick so a CSS folder and then the main.sas file all right and then finally we're going to also go to view terminal all right we're going to type npm init hyphen Y which we'll just answer yes to all the default options so that creates a package.json which will now allow us to actually install motion one so how do we do that let's go ahead over here to the docs and let's click on quick start and npm install motion very very freaking simple so let's install that alrighty awesome so we're ready to rock in that regard let's create an app.js file alrighty and then let's also reference it script and Source equals app.js let's make sure to put a console log here hi and then finally a parcel.index.html now you will have to use I npm to install parcel if you haven't yet on your machine so make sure you do that and right here is the URL now I'm just waiting for this to load we'll hit F12 and we'll see right up there hi so now our project is ready to rock within the context of parcel okay so what we want to do now is to find some HTML and the HTML for this is going to be super simple um we're just going to have a section that repeats three times did I put sections no section there we go and we're going to have an inner element so the reason I'm doing this a div nested and initiative is because this div section will be a display grid Place content Center that will Center everything up and then the inside of our inner element we're going to have a class of left because we're going to have two columns and of course stuff will be in there and then also a class of right very simple and then this is going to be like kind of like a card thing where you have an image at the top a paragraph or a title and then a paragraph so uh for that we're just going to do image source is going to be pick1.jpg um I think it's some type of abstract picture we're also going to have our an H3 element for the title which will be solar eclipse and then finally uh the dreaded lorem 20 there we go just some 20 words or so of crap that we don't want to read okay so now what I'll do is just honestly I'll just take the whole div class left and we will paste that right there this will be pick two um I I'll just type in uh let me see asteroid belt that's the first thing that literally came to work to my mind and that is it that's it so we'll take this section and for now we're just going to leave it there um and if we look at it we can see it looks like crap so let's real quickly switch Focus to the SAS or the CSS and I'll paste some rule sets in here and make this go quicker we're going to have a height of 100 viewport height on the body we have a font family of inter Sans serif and a margin of zero um we also have our section here so our section like I said height 100 view per height display grid Place content Center margin bottom 3M I did that to affect the timing of the animation it seemed like sometimes the uh the scroll activated animations which are going to be applied to all three sections the bottom section was firing too quick uh even though I wasn't scrolled into it so the a quick fix is just to add some margin you know maybe even like 0.1 M would work as well um there probably is a better fix for that I'm just not sure what that is in the context of this library that I'm very new to so uh we're gonna have inner as well and this is going to be simple it's just uh display Flex because remember there's two columns left and right and then we're going to justify the content space between we are also going to justify self Center which will get it in the vertical Center let's save this so far just to see where we're at all right almost getting there and then we'll do a width of 60 percent and also a gap of 4M between those two columns all right so we're not quite there yet it's still not ideal uh we're also going to take our images uh let's see here and we're going to say height is 200 pixels a width 100 and then object fit cover will fix the fact that we're screwing around with the aspect ratio and changing that to cover will work much better so now this is looking a lot lot better one final rule set for the paragraph I'd like to have a little bit more line height than that so we're just going to take the line height to 1.4 REM and there we go that's our very simple two column little two card layout so before we duplicate this and we have three sections I wanted to show you just how to do simple animations that aren't necessarily tied to the scroll position or something like that so in our app.js let's remove the console and the first thing we need to do is just to import animate so import animate from and this is going to be motion all right so now we're ready to rock all right so the way we can call this in the most simple format is we just call animate we'll open this up and we first have to specify selector much in the same way in green stock animation platform we select a selector as a part of the first parameter of the function like two from or from two we're not we're not doing gstap though I you can see the similarities though um and what we'll do for I this first one I guess I will just animate uh the images all right and then in the next portion what we do if we refer back to the um let's see here yeah right here the documentation for this I very very simple so we just take the selector we open it up in options uh or an object rather right here and we can then specify options in the third it's very similar to gsap tweens and such so let's say for instance we wanted to move the images um let's say why we'll just do 100 pixels just like that oops I forgot the object there we go all right so let's just save this I don't even know if this is going to work properly oh yeah I kind of screwed up over here we want to make sure we specify this is a module and then that should fix that error all right so if I refresh there we go super stupid and super simple we're just moving them down and what's cool is it it knows automatically even though we have uh multiple images it will it will still work and you can also stagger between them so if we click over here on the Stagger portion uh it'll show you exactly how to use that we have to import stagger though in order for that to work so if we go over to our app and we go over here put a comma import stagger you'll see based on the documentation weeks imminent options section we can simply specify a delay of a stagger that's where it gets called so right here delay stagger 0.1 let's try to make it more obvious by like point four and now you should see them both kind of come in not sequentially just like that now what's also really cool is that you can specify um multiple values here in this section so let's get this a little bit tidied up so it's easier to read um let's push this here let's get this right there actually I'm being simple leave that there I'm going to take everything and just kind of there we go and then finally um these are our options that's fine Okay so what we'll do is right here we can specify an actual array of values so if I put this in Array we can go from let's say zero and then actually let's make it go from like negative 50 pixels to zero alrighty so let's save it refresh and there we go now of course you could apply in effect multiple values here so I maybe we'll do height and we'll go from 0 to 200 pixels let's save it refresh there we go so you can affect multiple properties very very simple now let's say for instance we wanted to have based on you know uh maybe there's two cards that you have multiple sections on a website where you're scrolling down and you want those to to come in based on uh that portion or that that section being in the viewport so we have to import another element up here and uh that's going to be in view all right so they call it in view for basically handling your scroll based animation so we kind of have to refactor this code right here which honestly I had that looking pretty ugly uh here's how we do this for this I in view so we call in View and then we have to specify the selector uh that this will work off of and it can be elements that show up multiple times so if you have multiple sections you could still specify that without having to do query selector all for instance and iterating through them so I for me I'm just going to say section and before we continue let's just take this entire section and let's copy and paste it I'm not going to bother making everything unique right now but you can see right here now it would be cool uh to make these each one of these sections animate in like each card or in title and paragraph in some unique way so let's go ahead and focus on that let's go over here so we opened this up and then in the second parameter we're going to put in Target oopsie Target and then we're also going to open this up that was not supposed to happen there we go now in here what we want to do is we could now specify individual animations through the animate function just like we did but it's going to be tied to this uh this scrollable error area so these these animate calls aren't going to fire until the section is in view essentially all right so what we'll do is we specify animate and then we use the Target that this is passed into all right so now we have access to that Dom element based on that Target now what's really cool is we can take that Target let's do this and we could put query selector all image all right and then we could open up the animation options for that so we can say height uh we'll go from zero on the images 200 pixels just like we did before and then we'll also put transform none right here and then and you'll see I I'll add and remove that to show you what happens um when you don't have that and then we're going to put in the options a delay a stagger because we want to I'm gonna I want each one of those images in the left and right column to not fall in at the same time or have their height adjust at the same time so we're going to stagger those so 0.3 a duration um we're just going to leave it by default for now and then uh easing which is really cool you can have uh multiple easings the way this works is through an array so I I grab this from the documentation 0.55 this will just affect it the animation in a unique way uh in terms of how this is working so if I come over here and I refresh up we have an error of course oh yes that's because this target here needs to be like this we need to specify and wrap that in the squiggly object brackets all right so now if we save this there we go and there we go so they fall in and we can add a delay to those so that they don't start instantly uh for those subsequent animations there so now what we can do is we can take a Target here for our animate rather and we can add and change these together so for instance if we wanted to also take the H3 maybe we'll change the opacity from zero to one and again you can chain more than just uh two steps here and then also we'll have y for instance uh so we'll put negative 20 pixels so it'll come from the top to zero oh yeah stupid me this was I had this at one instead of wrapping that I'm coding too quickly and you'll see that initially uh it looks like it's hidden here and again we could put it I more of a delay between these but yeah it's fine for now and then we can also do this with a paragraph as well so we'll put in the P tag and for this one we're just gonna do yeah pretty much roughly the same thing just for the fun of it and there we go so if I come down and I I specify a longer duration like 1.2 things will happen a little bit more smoothly let's see let's save this there we go uh we're at the top now as you see I was at the very bottom rather now I'm scrolling up this is still working as well so refresh here we go and there we go so today is literally the first day this morning rather that I learned about motion one I'm not sure how took a long time I I think that's enough for today before you know we ever get it you know further what do you think about this do you want to see more tutorials let me know in the comments and as always make sure to subscribe if you haven't yet and I will see you soon goodbye