Intro to Anime.js - The JavaScript Animation Engine

[Music] hey what's going on guys so in this video we're gonna take a look at a JavaScript animation engine called anomie and this can be used for pretty much any kind of animation it uses CSS properties it uses Dom element and Dom attributes it uses SVG anything you can think of you can add animations to alright so this is the site here anomie j/s this is the home page and if we click on the github button this is this is the documentation you can see you can do cool things like this we're not going to get into anything extravagant I just want to introduce you to the library and I'm gonna show you how we can how we can do a few things but yeah this is the the API documentation you can see you can use just CSS properties which is mostly what we're gonna do we're gonna use some transforms just to move things around you can use object properties Dom attributes SVG attributes and you can animate shapes and images and even text you can create progress bars so there's a lot you can do you might want to look at this documentation but what we're gonna be doing is we're gonna build this right here which is not anything special but the way that we're gonna create it it's going to show you how to put together projects and maybe you can create something on your own so we basically just have some squares here these are just divs with different color backgrounds and we have a play button if I go ahead and click play it's gonna start the animation which is basically just going to take each square bring it down rotate it and each one is on a delay so that it goes one after another all right and then what's really cool about this is we can pause it anywhere okay we can pause it midway through and you'll see that it'll just stop okay if I click play it'll just continue where it left off so we can pause and we can play alright and it's set on it's set to loop but you can set it so that the animation just runs once if you want but I said it I have it on a loop so that's what we're going to be creating we're gonna get into a little bit of CSS a little bit of styling we're gonna do that most of that until the end though because I really want to just focus on the library all right so that's what we'll be doing this video guys hopefully like it and let's get started so if you guys really enjoy my content you feel like you really get something out of it consider becoming a patron to push me to keep bringing you high-quality educational videos showing your support with even $1.00 means the world we have different perks and tiers including a $2 tier that'll give you every udemy course that I release absolutely free to learn more check out patreon.com/scishow and in this icon and search for it and install it that'll allow you to open up your files on your localhost so what I'm gonna do is create a project folder so I'm going to just create a new folder in my projects folder called enemy yeah enemy app actually will call it and we'll open that up in Visual Studio code and we're gonna go ahead and create a couple files so first of all we want an index dot HTML okay we also want a style dot CSS and we want a main dot j/s alright so in the index.html let's go ahead and put some markup I'm using Emmet so I'm going to just do exclamation tab and it's going to give us a basic layout here alright let me make this a little smaller here so this is the documentation I have open over here on the right now let's go ahead and change the title we'll just say and me app and what we're gonna do is we're going to just use the CDN to link it you can install it with NPM and you can do all that and you know you use webpack and but I want to keep this really simple so let's just search for an me CDN and we'll grab it from CDN J s comm so right here the current version is version 2.0 0.2 so I'm going to copy the script tag and we're just gonna put that down right above the ending body tag alright and then let's just link our script file all right so we're gonna link our main J s let's also be sure to link our stylesheet up here oops so we'll say link and it's gonna be style dot CSS all right now if I want to open this up in live server I can just right click and say open with live server all right and again if you guys aren't using live server or a visual studio code you can just open up the the HTML file alright so what do we want to do we want to add some markup first of all so we're going to create a couple dibs so let's go right in the body here and let's create let's see we're gonna do three divs or four divs with the ID I'm sorry the class of box okay so I'm using Emmet so I can just say dot box and then I can actually do asterisk and then four and then tab and it'll give me four divs with the class of box all right now each one I also want to give a different class for different colors so we'll have red we'll have blue green and let's do yellow all right so we'll save that obviously we're not going to see anything over here because there's there's nothing there's no text or anything but we're gonna add some CSS real quick so remember we have a class of box so we're going to style that so for our box class we're going to position this to relative alright because we want to be able to add we want to be able to Anne to animate the position we're going to set the the initial width of 100 pixels let's also set the height to 100 pixels alright and then we're gonna set a margin of four pixels and we're gonna set this to display as an inline block so in line - block alright so that's the actual box now if I save it we're still not going to see anything because we haven't added a color each color is gonna be attached to its color class so let's go ahead and do that so we'll say dot red so red class will have a background color obviously of red all right so have red we'll have blue which you'll have a color of blue we'll have green and we'll have yellow all right so let's go ahead and save and now we have our boxes all right so we're not going to do the controls the the play/pause and all that we're gonna we're not going to do that until the end okay so what we need to do now is go into our JavaScript and this is where we want to create our anomie functions so if we look at the documentation and we go down we need to create an anim function that takes in a configuration object and you want to specify what the target is what you want to animate and like I said this can be a CSS selector or a Dom element a node list and object and array there's a lot of things that you can do but we're going to be dealing with CSS selectors okay so we want to basically create an enemy function for each box and then we want to add our properties okay so things that we want to animate you can see you can do like background color you can basically animate any CSS property opacity sizes things like that you can also set durations you can set rotations so let's go ahead and do that let's add in our first enemy function and the way that we're gonna do this is I'm gonna create a separate anomie function for each box okay for each one of these at first and then at the end I'm going to show you how we can optimize it into just one alright so at first it's gonna look like you know it's going to violate the the DRI principle don't repeat yourself but at the end I'm going to show you how we can optimize it so this is gonna take in a targets okay so for the target it's gonna be a div with the class of box and we're gonna deal with the red box first okay so it has a class of red alright and then we're going to add in since we want it to move down we want to use translate but we want to use translate why because we're dealing with the y-axis okay the y-axis is up and down the X is left and right in this example right here they're doing X but what I'm gonna do is copy this and paste that in and let's change this to Y okay now the reason that this is set to an object with two of 202 I'm sorry an array with two objects is because we want this to run twice we want it to first go down okay and then we want it to go back up so this value here is the p' is the basically how far we want it to go I want it to go 200 all right and then I'm gonna set the duration to 500 which is 500 milliseconds okay so half a second and then we want it to go back to zero actually first of all let's just run it like that let's see what that does so if we go over here and we save since I'm using live server every time I save it's gonna reload on its own so you can see it just moved down okay so what we want to do is go I'm just going to undo and put that back because we wanted to go back to 0 and we want the same duration of 500 so let's save and you'll see that when it reloads it goes down wait a minute did I do that right actually we want a duration of 800 to go back up let's down up that seems fast it's because we didn't have the return rotation and yet but you can always change this if you wanted to change this to let's say 3 3000 which would be 3 seconds it'll go down take 3 seconds and go we're back up in 8 800 milliseconds all right but we're just going to keep it like that all right so next thing we want to do is I want to do a little rotation so we're gonna add another property here of rotate alright so for the rotate we could just say one turn actually this needs to be in quotes so we could say one turn and save and you'll see that it'll rotate alright every time I reloaded it runs and it rotates but I want to actually I want to set an easing value on this easing is just kind of the way that it starts and stops you can have it start slow and fast or start fast and slow things like that so what we can do is we can actually set this to an object with a value so the value will be the same it's gonna be one turn okay but we're also going to set the it's the easing and we're gonna set that to ease in out sign so ease in out sign si and E and save and you'll see that it just has it has a little bit of a different effect all right but that's what we want and all this stuff is in the documentation let's see so for instance yet right here are easing so we have duration we have delay okay we're going to be using some delays as well elasticity so there's different options that you can use yeah you can get very advanced with this stuff but I'm just trying to keep it simple but that's our first animation for our first box so what we're gonna do now is we're going to Adam for add this this stuff for the next box which is the blue one so I'm gonna copy everything here and we're gonna change this to div box blue and let's save and see what happens so what happens is the exact same thing and it happens at the exact same time which is not what I want I want the red box to go first and then the blue box so in order to do that we need to set a delay so let's go to translate Y which is where it brings it down and let's go and in addition to the value in duration let's set a delay all right now we want if we say delay 500 let's see what that does okay so that's not gonna work because it's 500 down but it's 800 up so it's it's it's starting when this one gets down and we don't want that we want this to start when this one gets up so we're gonna set the delay to a thousand all right we're gonna go like that all right so first one will go down that one will go down actually you know what okay so it still doesn't look right because the turn the rotate turn is actually happening at the same time as well so we want to put a delay on that as well so right here let's say delay we're gonna do delay and we're gonna set that to 1,000 as well so let's save there we go so that's the effect that I want okay so let's do the same thing for the green one so we'll go ahead and copy this and we'll paste this in we'll say we want the div with the the class of green all right and this time we're gonna change the delay to 2,000 because we need to wait for the FERC for the green I mean for the red and then for the blue so we'll set that delay to 2,000 we're also gonna set the turn delay - mm - a f--- the red green I mean red blue green good so now we'll do the same with yellow so we'll go ahead and paste that in and we'll say yellow and we're gonna set the delay to 3,000 on both the translate and on the rotate and we'll save and there we go so that's the effect that I want so having all four of these is really violating the don't repeat yourself coding principle so what we can do if we look at the documentation we can actually set right here function based property parameters so we can set a function as a parameter and that's what we want to do we want to do a delay just like they're doing right here and that will delay each one okay so instead of having to do four different enemies we can do one and it'll apply that delay to each each each iteration I guess so what we'll do is I'm going to just first of all just copy one of these and then I'm gonna comment all of these out and I'm gonna leave them because I want you guys to have them in the resource files okay but then we're gonna go down here we're gonna paste this in and instead of saying div dot box dot read instead of just targeting the red box let's target all of them okay they all have a class of box so if I go ahead and I do that and I save it's gonna just you know it's going to run it all at the same time so what we want to do is we want to add in down here we'll put a comma and we're gonna say delay and we're gonna set that to a function okay and that function is going to take in the element the iteration and then another parameter which is what is this parameter total targets all right so what we have to do here is very simple we're just going to return we're gonna take each iteration and we're going to multiply it by whatever the delay we want so I'm going to say 1,000 the reason I'm saying 1,000 is because that's the amount of time for it to go down and up okay so let's go ahead and save that and then let's watch it and there we go so it's doing the same thing with this one anomie function or this yeah this one anomie function rather than having these all these different ones okay so that that really cleans it up so let's see that's the animation and by the way you guys can can add any property you want for instance if you wanted to add like background color any CSS property just make sure you use the camel case you can't do background - color like you wouldn't CSS but if you wanted to set this to let's say black and save you'll see that each time it goes down it'll get set to black and it's going to stay there unless of course you make it go back to its original color but you can set things like opacity so if you wanted to set that to let's say 0.3 and save you'll see that each time it goes down it'll it'll get lighter will get transparent so just mess around with this stuff you know I mean what I'm building here is just an example there's a lot more you can do and I always encourage you guys to build stuff on your own don't just don't just watch my videos copy the code and that's it think about it look at the documentation figure out something to build on your own and then share it with share it in the comments you know any links that I see in the comments that are you know projects that you create from you know from my video from my tutorials I'll always approve those ok I get a ton of spam links like to you know look at my website and like service or company and all that and I don't approve those but any any kind of project you guys build that's that's based on the video I will approve all right so now what we're gonna do is apply we want to apply the buttons so we're gonna actually edit the mark-up for this one second what we're gonna do is go to the HTML and we're actually going to wrap all of these these box classes in a div with the ID of boxes alright so we'll say div ID boxes and we're gonna wrap that around all of these okay and then inside here we're gonna have another div and we're going to give this an ID of B of buttons BTN s alright and in here we're gonna have our two buttons so we'll say button this is gonna have a class of play and we'll just say actually I'm not going to put we're gonna be using icons we're gonna use font awesome for now I'll just say play but I'm gonna get rid of it alright and then we'll go ahead and copy that and we'll have a button with the class of paws all right in fact let's let's grab font awesome now so we're just gonna search for font awesome CDN and we're just gonna grab the link tag right here let's copy that and put that right above our link to our style sheet and we'll save that and then for the icons instead of putting play here we're gonna put an eye tag with the class of FA okay font awesome and then we also want the actual icon class which is going to be FA - play - circle all right so that's the play button and then let's copy that and for the pause sorry about that we're gonna say FA - pause circle let me just put this on vibrate alright and let's see is that good for the yeah I think that's that's good for the mock-up so let's save that and it's gonna look like this for now okay so what we want to do next is let's do our styling okay before we get to the actual JavaScript for the buttons let's let's style some stuff here so let's see four boxes and put the ID of Bach actually we'll put this above the class here so we'll say boxes and we're gonna set the width here to 80% I'm gonna set the margin Auto so this is basically like a container set that to auto and let's align to the center all right I'll save that good now for the buttons remember the buttons ID goes around the button both buttons so ID BTN s let's set a padding of 20 pixels let's set a background of light gray f4 three times and let's set a margin bottom margin bottom of 20 pixels and save there we go and now for the buttons themselves let's see so we'll say ID BTN s and we want button okay so this is this applies to both buttons we're going to set the background to white we're gonna set the padding to 5 pixels on the top and bottom 10 pixels on the left and right and we're gonna set the border of the button to zero all right we'll save that good now we just want to make the icons bigger and change their color so we're gonna say I D BT NS remember those font awesome icons they have a class of FA so we're just gonna change the font size to 30 pixels save that and then I want to style the color but each I want this one to be green this one to be red so we need to target the actual icon class so again BTN s then we want FA - clay - circle okay that's the play button and we're just gonna set the color of that to green and then let's copy that and we'll set the FA paws circle we're gonna set that one to read and save and there we go so that's pretty much our interface it's not gonna work yet right now it's still just gonna run when we reload the page so what we're gonna do now is go back to our JavaScript and let's see let me just pull this up so what we need to do is is we want to put this enemy function into a variable okay so let's say var and we're gonna call this play pause and we're gonna set that equal to that enemy function alright and then what we want to do is we want to select each each of these buttons and apply an event okay now let's let's actually set autoplay for this to false because right now if I reload the page it just it's gonna go automatically so there's actually a property called autoplay okay and we'll set that to false so that way if I save and the page reloads it's not gonna just automatically run alright now we can actually fire off before we get into any of the button clicks or anything we can fire this off by taking that play pause variable and saying dot play okay that's part of the API so if we save that it's gonna play okay and then we also have play pause dot pause which obviously isn't going to do anything because it's not playing all right but what we're gonna do is set up some events so let's say document dot and we're going to use a query selector okay so query selector and we want to grab in the boxes ID we want to grab the play button okay which has a class of play I believe let me just check so button has a class of play so that's what we want to grab and then what we're going to do is we're going to say dot on click and we're gonna set that equal to what I just showed you that play pause dot play okay and play pause is coming from this variable name okay if actually you know it now we'll just leave we'll just leave it at play pause but you can call it whatever you want you call it boxes if you want but we'll just leave that so let's go ahead and save let's see why is that playing automatically it shouldn't be on click equals Oh actually I'm running it because I have the parentheses there it should just be on click equals clay pause dot play like that so then when we click it then it runs all right and then for the pause it's the same thing we'll just copy this and we'll paste this in and we're gonna choose the pause button which class has a class of pause and we're gonna call play pause dot pause alright let's see on click of no why is this no boxes dot pause let's take a look over here and it's because I have a class I have an uppercase P for the class don't want that alright so now let's try it let's press play pause and there we go play again pause play good now if you want it and you can see how it just stops when it gets to the end if you want it to keep looping all you have to do is add a property of loop and set that to true and then save and then if we play it it should go all the way through and then it should start again there we go and of course you can always pause it and play it alright guys so that is it that's our little animation script or project hopefully you enjoyed it I know it's not the most practical thing in the world but hopefully it turned you on to the enemy JavaScript animation engine it's much better than using something like jQuery you know it's it's a specific library for that so hopefully you liked it and that's it leave a like subscribe follow me on social media whatever you guys can do join the discord server I appreciate all that so thanks for watching and I will see you next time hey guys I've just created a new discord server that's open to the public the goal is to have a place where people can go to help each other out for programming issues as well as just a place to discuss new ideas and get feedback I also check in daily there's a channel to request videos on YouTube and much more so if you want to check it out just go to discord GG slash Traverse E media

Channel: Traversy Media

Views: 144,263

Keywords: anime, anime.js, animejs, anime js, javascript animation, animate javascript, js animation, css animation

Id: g7WnZ9hxUak

Length: 29min 31sec (1771 seconds)

Published: Wed Sep 06 2017