SVG Morphing Animation With Javascript Tutorial | Javascript Animation With Anime.js

why hello there my beautiful people how you doing today hope you're excited because we're gonna cover three different things we're gonna cover SVG morphing we're gonna cover animation in general and also dark mode three things and one so we have this son here and when we click on it look at that it's gonna magically morph into a moon and sounds gonna do a flippity floppity and it's gonna turn like that and look we can see the white text and when we click again boom how about that that's pretty cool get your pigment ready get your BS code ready let's build this out together wah okay here we go Sigma what do we need them figma well I have a frame here but who cares we don't care about the frame all we need is a circle so go up here to your your rectangle tool I think it's by default but we need the Eclipse exactly so hold shift and drag and then we get this nice blob so I'm gonna do pretty small here 55 pixels I'm gonna zoom in so you can see as you can see 55 now I don't know about you but this doesn't look like a son to me so let's change the color to something sunny oh that's a nice orange II like a sunset type let's go lighter there we go I'm happy with that one so what we need to do here is actually not export this yet because if we export this now we are gonna have an SVG with a circle in it but that's not what we want we want an SVG with a path that has some data points and what we can do if we have a path with some data points is we can take those data points and we can move them around and we can morph it and animate with them everything is just perfect okay that's what we need to do so screw the circle we need to transform this into data points so the way we do that is we double-click on this not double-click the other click the other click can be right click good I'm still sick so I'm kind of saying bad things then I apologize well what we need to do is we need to right-click the other click and we need to go to flatten and when we flatten this and we go to copy as SVG and what I have here is just an MTV s code all right so there's nothing in here and inside the body I'm just gonna paste this in here so as you can see now if we flatten we're gonna have a path we're not gonna have a circle anymore good so that's that's exactly all we need now let's also make the moon so to make the moon I'm gonna double click on this and as you can see we have four points here now we can move these around now now we're gonna animate this and we're gonna morph this with a library called anime about Jas and yeah what they basically allow you to do is take these points and move them around and animate them so animated J s is pretty good it's not great there are better alternatives out there like gzip but the problem with gzip is they have a morphing plug-in but it's paid and I don't know it's really good though it's probably the best but since it's paid I kind of want you guys to also be able to follow along so I'm not gonna use it okay I like free stuff free stuff is amazing so let's do it with free stuff so we're stuck with anime pangaea's that's what I'm trying to say there's no hope okay so what I'm gonna do is I'm gonna drag this point from here all the way to the center and when do you know it's the center when these two bars appear here so it should be two red bars there we go so a cross good let go perfect now what else do we need to do is we need to drag you can see we have these two handles up here so one up here and one down here we can drag this one from the right all the way inside this one let go same here just click on this if you don't see the handles and then we're gonna drag this as well all the way in here okay let go and we can just move the center one a bit back more so I don't know that looks okay for me is they okay are you guys happy I'm okay with it click done up here and book we're gonna right-click put it on the copy as SVG perfect go back into vs code we're gonna paste this back in here nice let's see do we have both well I need to close this one because this is the finished one so let's go back to vs code I'm gonna explain that's all we needed in figma by the way we don't need figma anymore we can close close that sucker up we just needed the two shapes and now on vs code but let me just open this up really quickly in index.html and I'll explain everything in here don't worry so right now we don't really need the moon we just need the Sun and we're gonna get rid of this but one thing I need is this so this is the Sun up here and this is the moon okay all we need is this path this D equals to C this long ass thing the the points basically to your shape so copy this and paste it somewhere else I'm gonna keep it in here cuz I don't want to open ten thousand things but what we have here is just an empty HTML I just linked a CSS in here which is just has margin padding removing an address which is empty we're gonna do everything from scratch and anime AAS and you can get that by going here to animate a Jas you can go to download and I think it just downloads it for you if you click on it I was gonna bring you to github you can scroll scroll and it should be here there's data there manual download there we could download it from there you can drag it into your project and you're good to go then we're gonna link it it is no link it apparently so I'm gonna do script and we're gonna say source and we're gonna do this animator GS and then we're gonna do script and we're gonna do source app dodgy is perfect snap that in there nice okay let's do a bit of CSS just to get these things go nicely and that's gonna happen in like five seconds because I don't want to waste time on CSS so let's just add everything in the section here I'm gonna say a section like that I'm gonna copy paste everything in here I'm gonna actually copy this so it told you we need the path from here I'm gonna copy it cut it actually and I copy it I'm gonna delete this path I'm gonna jump around a bit here I apologize and go to AB dot J is just the bear I'm gonna add the I'm gonna create a variable called moon path and just paste this in here just so I don't actually I don't need the quotes here because I copied that with the quotes B be careful I messed this up and I wasted half an hour trying to figure out why this doesn't work just make sure you have one cool it here okay I just make sure and close this up like that okay I just want to get rid of this so it's not in here good nice so we just have this SVG alright so we we need to have one SVG one SVG with the path and the closes and I don't need this one okay just the Sun SVG good perfect let's also name this and we need to place it in the section up here good nice let's also add a an IB to this so let's go to the SVG I'm gonna add an ID of let's do dark mode and to the path I'm gonna add a class of Sun alright so this is the path of the Sun we're gonna morph it to the path of the moon that's why we added the moon path god okay perfect that's all we mean close this sucker never open it again screw you HTML we don't like you okay that's style let's tile by the way I styled my hair if you see if you can see actually my mother styled me okay she cut my hair she was like Edie your hair looks like trash let me style it for you I'm like nope I have my own hair stylist but I knew I was lying to myself so I let her cut my hair height a hundred eh alright we're gonna add a background color RGB this is gonna be quite light 199 199 199 and clothes so this is almost white it's not white it's a big greyish maybe too greyish I'm happy display flex justify content and center a line item Center you know what we're gonna add the text up here or down here so I'm gonna just do flex direction column and then we're gonna to justify content space around just so the text pops up above justify content space round and I forgot the text oh my goodness let's go back to HTML I said I never open open you up again but I'm just lying to myself h1 above the SVG we're gonna do dark mode save and now we have it like that so that's why I added the justify content space round so we have some space going there good down here let's just add SVG I'm gonna add cursor:pointer to so it looks like a pointer so looks clickable and that's it h1 yeah maybe on the body should place this up there Marie not gonna do it anymore fun family sin serif there we go let's get started with the animation we have the moon path here what else do we need well we need the Sun path as well because we want to morph back to it eventually so when we click it again we kind of need the morph back to it so do Khan's Sun path it's gonna be equal to and I'm gonna copy the keep coming back to your HTML I don't know it's like it's like that good-looking X and you hate her or him but you keep ending up back feels bad but let's go back where's my son here's my son let's copy the river my limited touchpad is gonna give me a bad time here copy all right we have son and paste the son in there perfect this kind of looks the same which is quite funny well it should be kind of the same anyway we have the son path good what else do we need hit save that's so weird that does that look at that that looks weird anyways so we have the son path now what we also need to do is get the SVG so we're gonna Const dark mode it's gonna be equal to document the query selector and we're gonna do dark mode like so did I select it through correct wait dark mode yes with uppercase perfect nice so what we need to do is we also need to have a toggle function that's gonna switch between false and true so when we click on the Sun and it's gonna turn into the moon it's gonna be switched so we're gonna have true and then we can morph back to it and we can rotate things and we can do multiple things change the background color and everything based on this value so this is like a switch this is like like me going here true it's true now false true false and based on that based on that we're gonna animate things so we're gonna create a Const it's not gonna be a Const because we're gonna change the value of it so we're gonna have to do let here let's toggle it's gonna be equal to false I'm gonna leave false by default remember if you do Const toggle and you do false and then you do something like toggle is true well that's gonna give you a nice error because you cannot change the value of accounts directly so that's why we're doing a let here believe that perfect good so well well do we need to do we need we need to click on the Sun so how do we make the sound clickable we're gonna do dark mode dot add the event listener and on click we're gonna run a function I'm gonna do an arrow function here and you should too because you're good so in here we need to use enemy Itachi yes first thing we need to do well we're gonna do multiple steps so we're gonna morph the shape we're gonna rotate it and then we're gonna change the background so it's like a timeline we need to do multiple things in the sequence so animate that Jas has you covered because what you can do is you can do an animation in multiple steps very easily so we're gonna create a Const and we're gonna call it timeline this is our timeline you can imagine it as a sequence of animations basically you can move something and when you finish moving you can make it bigger then you can bring it up you can bring it down you can change its color so everything is gonna happen one after the other so this is what the timeline is so we're gonna say anime dot timeline like so and I'm a done timeline perfect now we this is a function so we need to open some parentheses and this actually takes some a this takes a parameter of an object and in here so you need to do the curly brackets and any I'm gonna press ENTER just so we can visualize everything better here we can define some extra properties that our timeline is gonna have like how are my animations like how long are they gonna be well I can do duration for that so the duration it's gonna be double dots like so because we're we are in an object here and the duration I want to say it's 750 milliseconds okay that's how long I want each animation to last okay I can add a comma here and we can also do an easing so easing double dots and I can do one which I found really cool ease out Expo this is a string make sure it's a string okay that's it I'm just defining some values so here we set up the timeline nice down here we need to create we need to add things to the timeline add different I'm not sure why I'm yelling animations to the timeline alright how do we add the different animations well we can do timeline dot add and in here we can grab an element and we can do whatever we want with it so again this is gonna be an object so it's gonna be a function here and the parameter that we have in it is gonna be a an object so curly brackets again I know all this kind of weird but hey it is what it is hi miss G set up already all right in here we can grab the Sun basically so the way we do that is we can say targets and we can do double dots again and we can do a string with the class of Sun so basically this is like query selector up here as you can see we can just grab an element in here now what we need to do is we need to animate those data points and as you can see there D here so that's how they are named so we can do add a comma here and we can just say be like so and D is gonna be an array because we can morph this more than once so in here I'm gonna hit enter I'm gonna do curly braces so this is basically an array of objects so a big array with a lot of objects and all those objects are these data points I know pretty cool huh and here we can define a value and what is that value well that value is this long as crap up here but we did variables so we don't have to add that so we can just change this to moon path moon death with big yeah we moon back so again if you want to animate this again if you want a more fit again well you can just add the comma here head value and just do another morph okay let's delete it because we only have the moon now cuz that's all we need good good perfect and that's that's all we need here hit save let's take a look up here and let's see make sure everything is okay okay we don't have any errors and let's see what's up so this should in theory animate well it's not animating because we didn't click on it let's click and there we go look at that amaze now there are a few problems when we click again nothing's gonna happen so yeah but let's just finish the default one and then we'll do the backwards one so this is morphing now to get things to rotate all we have to do how do i chain together another animation well down here okay so let's let's take a look so here we have the timeline here we added something to the timeline like so well here we can chain another one so I'm gonna delete the last semicolon here and I'm gonna do add again like so I'm gonna hit enter and then here we can do another one and then if I want to do another one we can add again like so so let's get rid of this so you can just add more and more and more in here and the second add what I want to do is I want to get the SVG and I want to rotate it so in here my targets is gonna be the dark mode like so hit comma I'm going to rotate it's gonna be 320 I think hit the 320 let's see how that looks click boom so as you can see it waits for the morphing to finish and then it's gonna rotate because we defined that every animation and this timeline should last for 750 seconds so the morphing is gonna happen 750 seconds then it's gonna rotate for 750 seconds okay Edie but what if I don't want to do that what if I want it to rotate faster well fear no more because we have a solution you can offset that time and you can make it enemies faster or later so maybe you want to animate this faster how do I do that and I want to wait 720 seconds because life is important time is money click here and after so we have this object right and this add again parentheses and object where we define all these properties well we can go outside of this object so in between this curly bracket and and and straight bracket no it's a straight bracket curly at just the normal parentheses and we can add a comma here and we can say add a string and we can say minus equals and we can define milliseconds here how much faster it should become so if I want this to be at the same time I can do - equals 750 but I don't want that that much I wanted like 350 hit save let's see there we go so it's way faster now perfect nice and nice I'm happy with that now there's one more we need to add which is gonna be to make to change the color so again just enter I'm gonna say add and also curly bracket we're gonna say targets and I'm gonna do the section that we have on our page section at the comma we're going to do background color and make sure to do it like this and I would like but like we do it in CSS because we're in JavaScript and it's not going to work and then here we can do RGB well we need the string because it's string RGB we can do 22 22 22 like so and we are almost done let's see how that looks hit save boom boom boom now the problem is we can offset this again so it last it goes way faster we can just add a comma here we can do minus equals I'm gonna do this one I think actually we need the strings again minus equals 700 let's see there we go I like the timing of that play around with it if you don't like it I bid 700 here it is what it is now the problem is we cannot go back how do we go back I'm stuck it's night time it's party time how do I make it sunny again well to make it sunny again we need to use this toggle that we have up here okay now how do we make it well down here every time we click on the Sun I want that toggle to switch from true to false from true to false how do we make that very simple we can just do a simple if statement we're gonna say if and I wanted to not talk now what is this not toggle well we know toggle is true is false I apologize you know toggle is false well not false this is de not symbol not false is gonna be true so this is gonna be true now what we can do in here is we can switch the value and it's gonna be true that in here the check is gonna be if it's not true then it's gonna go into the else so basically this is gonna run once in this and if and once in else it's gonna run once here run once in here and what we can do here is we can say toggle through and in here we can see toggle false and I'm gonna explain again what's happening here because it's a bit tricky so toggle is false when we click because this is in the click listener here when we click it's gonna go here it's gonna check if it's not toggle which basically means well it's false so not false is gonna be true so this this is gonna run in here and it's gonna change toggle to true good toggle is true when we click again it's gonna run again if toggle is true not true I apologize well it's false then the else statement is gonna run so basically this is gonna run once and this is gonna run once every time we click good so how can we implement it in here because animator that jazz did not include a reverse function I mean there is a reverse function and I experimented with it a ton of times and it just gave me a lot of trouble so I'm not gonna I'm not gonna bother you with it what we can do is now that we have the switch thing this toggle thing we can use the ternary operators in here to switch everything back so what I mean by that is let's go to the background here what we can do is we can say toggle and we can do exponent not the what is this oh my god the question mark and what is here it's going to be true and what is here is gonna be false so by default I want this the true one to be white so I'm gonna do RGB I'm gonna do 255 255 255 so basically when the toggle is true this is gonna run and after this we're gonna do these double points like so and if it's false then this is gonna run so this is what the ternary operator is is it's super simple if it's true this is gonna run if it's false this is gonna run it's like a short if statement good so we have that let's test that out it should turn back now yeah it works so we need to that to the animation and to this as well so let's fix up the animation because those are the two important things again in here we can do the value so if my toggle is question mark if it's true that I'm gonna do these some paths and if it's false I'm gonna do the moon path oh yeah there we go perfect let's also fix up this thing so we're gonna turn the text to white and the way we can do that is super simple in here we can also change the color so besides the background color we can just do color and we can do toggle again if it's true I can change the RGB to 222 222 222 and if it's false then we can change the RGB 255 255 255 hit save and let's take a look and there we go everybody everything works nicely hope you understand more how this time light things work and yeah this ternary operator and the switch and everything but yeah anime that is pretty fun I like it I apologize if I rambled on too much I'm really sick but who's the hardest working channel in the game right now it's me I have to make it so good alright thank you very much I have some really cool video coming up in the next few days and I think you're gonna love it I have I have my ammunition prepared so let me know what you thought of this video drop it in the comments also drop a subscribe we are going crazy we're getting three K and it's just as crazy okay thank you [Music]

Channel: Dev Ed

Views: 97,429

Keywords: svg tutorial, web design, animejs tutorial, css animation, svg morphing animation, svg, svg morph, svg anime.js, anime.js, anime.js tutorial, javascript animation, javascript tutorial, javascript animation tutorial, javascript svg, javascript svg animation, dev ed, svg animation tutorial, svg morphing, svg web design

Id: bfaPnlYE8Jo

Length: 29min 39sec (1779 seconds)

Published: Wed Feb 27 2019