Anime.js Tutorial - Morphing SVG's in Web Design

all right so this is what we are doing today and pay attention to what's happening to this is blue shape which is an SVG graphic when I click on this click me it first animates I this anchor point and then we take another anchor point up here and push it all the way to the left hey everyone Garry Simon of course Tetro so yes I've been on an SVG kick lately it's really fun stuff though you can't blame me but I so what we're gonna do is handle all of this stuff here that you just saw in something called an 'm dot j s and an 'm J Escom is where you can find information we're gonna take a look at it shortly in the screencast eye but it handles a lot of animation obviously for your web layouts using javascript and it's really easy to use and it has good documentation and it also has a section for SVG specifically and you can handle line path animation and also morphing which is what we're going to look at all right so make sure you subscribe here on youtube if you haven't yet and check out course cetera comm alright so here is anime is calm that's where you can want to go I just clicked on here they me realize that happened but yeah we can see we have the documentation there's code pen examples if you want to check that out and then github now that will show you how to install it and everything on the main page so I if we go to documentation you'll see it's quite robust so the way this is set up over here we have you know your index you have the main examples in this section and then the the JavaScript and HTML that's necessary to make this stuff possible so there's a lot of stuff you can do with it in the thing that we're going to be focusing on in this tutorial is SVG and specifically morphing alright so as you can see in this example we have morphing taking place and the HTML associated with this is right here in this section I wish I could resize these so we can look in a little bit better but all this stuff here is just SVG code and so that's what we're going to be using and then up here in the JavaScript this is what it takes to change these points and so it is it's really I when it comes to morphing it's all about using this array of objects here to morph the or change the actual shape of the SVG itself and then you have a bunch of other options like your duration looping and so I'm not gonna you know provide a comprehensive tutorial on all this stuff but we're just gonna take a look at that one example and what it takes you know to to make this happen all right so let's go ahead and get started the first thing we'll do is hop into Adobe Illustrator and you don't have to use illustrator anything that's capable of exporting SVG graphics will be just fine so I put the width and height I didn't have this really set out exactly how I thought it should be beforehand but I may just change this anyhow with the artboard tool so 300 by 100 just for now I kind of want to do this to be in an aspect of yeah that's way off I just like a on a desktop resolution something right around here alright so we're gonna create a rectangle that's exactly this size all right so to do that I'll go ahead and left click I right here and drag out and you have this the the guides that will snap into place that you're certain you're of that size the stroke we don't need a stroke we have a fill here I'm just gonna use a blue color and right there from the swatches and right now there's just four anchor points because well this is a rectangle so if we want to have more fine control over a more unique shape we can add an anchor point so for instance you don't have to I mean if you only wanted four that's fine then you can moving in like this alright I but we're just gonna add one anchor point so if you left click and hold drag out and choose the add Anchor Point tool you can just add one you'll see a little plus sign shows up probably a little hard to see we're gonna add line right around there so now when I drag this in it creates a slightly different view you can move them around by holding shift and I kind of like that and so this will be the first part of the animation and the second part will move this anchor point over with an MJS alright so to start though it's just gonna be this right here alright so this is the part that just fills up the screen so what we need to do now is to get the actual SVG code associated with this so if I hit ctrl shift + S to save as we're just gonna choose SVG we're not going to save it we just want the SVG options to show up when you hit save so we can get the SVG code now depending on the app you're using this may be a different process but in the end you just want the SVG code so if you do save it as a SVG you can just open that up in your code editor and get access to this stuff right here so what we'll do is copy everything from this SVG version line here down to the closing SVG tag we're not going to use all this but we're just going to copy it make it a little bit simple and then open up a code editor alright and I have Visual Studio code open or free code editor very popular with a project open in a folder called project there's no files in it as you could see so we're gonna start with a new index.html file we'll also create a main CSS and in the index.html we'll just hit the exclamation point Hannah to get some quick boilerplate code and then we'll link up our stylesheet and HR f equals main CSS alright and then we'll go ahead and paste in that SVG code now we can get rid of a ton of stuff here in fact for the beginning SVG tag here we can just go ahead and remove pretty much everything with exception to the view box all this stuff okay so now we just have a simple SVG tag here with a view box now if you're unfamiliar with what the view box is I basically it's an attribute that allows you to specify that a given set of graphic stretch to fit a particular container element now that of course was taken straight from developer mozilla.org probably confusing if you don't understand it but this is basically an X in y coordinate and then this is a width in height and I this is you know again this was generated from adobe illustrator and it really allows you to define how the content inside of the SVG will stretch inside of the containing element if that makes any sense all I can do is just suggest to research more on your own and play around with it and you'll start to understand how it works so the important thing though is we're just gonna leave it based on what illustrator has specified this style right here we can get rid of that actually I'll just copy this real quick all right we don't need a group all right and here it is very very simple so I'm going to change this class from st 0 to poly morph and we'll go into our main CSS file and we'll reference that i that class I'm just gonna paste in what we had here previously so polymorph and that gives us the background I'm also going to adjust the body real quick here get rid of the margin and font-family my favorite font montserrat which i already have installed so I don't have to import it from Google and for now that's just that should be fine so if I hit a control B to get our sidebar up right click reveal an explorer and double-click on that out there this is what it should look like now this here I won't fill the entire space of the document so we would assume that this this would be a good use case for instance for the top like a hero section for a landing page alright and also going forward yet you will understand that I'm not gonna need to focus on making this fully responsive all that will be simply a matter of adding media queries to the CSS in order to adjust the different elements in relation to this SVG graphic is but especially when you click on the click Me button as shown here and things start to change so as you can see right here you would want to adjust the CSS positioning of this element so that it doesn't completely break everything and look like crap alright so let's go ahead and continue go back to our original one here the next step will have a a button and actually I think will focus on the other part which is going to be the anime yes part and we'll get this animating how we want it alright so what we'll do first is we need to download the anime s file so going back here if we go to our github and we'll see under here you can manually you could use NPM to install it we're not going to do that we could just manually download and lengthy anime nsj file so if you click that it's going to give you a zip file and this one right here is what you want alright so I'm just gonna drag that in there alright so let's close this out go back to our code editor and we're just going to put in a script source source equals annum dot oops Minjae s all right great now the next step and this is where it's going to be helpful to take a look at the documentation the next step would be to let's take a look at that documentation real quick so we have morphing that's what we want to do with that SV Geographic so we can see here this is the example that they have and how it's set up so let's copy all of that stuff and then come back here alright so script let's get this tabbed up and inside of here let's go ahead and just paste that stuff and then we'll take a closer look at it so in here we have targets property so the target is basically what you want to morph in our class or our case this one is saying a parent container called morphing we don't need that we're just going to say polymorphous to class there's the class tada now the points is in relation this is the starting points by default up here now these points here which is an array of objects is what we want to change these points to so how do we know exactly you know what type of values to put in well you don't just guess you could but it'll make it life a lot easier if we just adjust it in here to where and how we want this to animate so we'll take this upper right corner and we'll say right around there something like that I guess all right so once you have it to where you want we can just save again and then oops not an on a I file sorry about that we'll just choose our SVG save it we get the code and then we only copy the points value right here alright so cancel out of there so for the first value let's see oops just paste that in let's go ahead and get rid of these other ones and let's give it a test because right now we don't have any type of clicking that's it's just gonna happen automatically so if we refresh and get to our document it's gonna loop over and over all right so obviously we don't want that but this is what it's going to look like and it'll stay there because we're not going to loop it so going back we're gonna make just a couple adjustments on this first let's do the second part of this because we're going to have two different transformations taking place we'll move this one all the way over holding shift to the very edge all right so now we can do the same process save it as an AI or SVG rather that's VG code get our points and then shift alt and down arrow key and then paste that in here so now we refresh there we go so obviously you can do really complex animations I mean it doesn't only have to be based on one anchor point moving at a time it could be a bunch of different stuff so very powerful so now let's make this so that it doesn't loop so the loop will be false the duration we're going to take down to twelve hundred easing you can check out the documentation for different options on that that's also very flexible and what we want to do is only make this occur on a click event so let's add the HTML that we're going to need so up here we'll put in let's see here a button if I could type ID equals CTA for call to action button click me all right I'm also we're gonna have that little blip where there's like information that shows up afterwards so we'll call it ID of blip and then an h1 well that was revealing and then we'll put a paragraph tag and I'm just gonna copy and paste that off-screen you could use lorem ipsum text if you want alright and then a button to go back to revert the innovation so ID equal CTA to go back alright so that's it for the HTML for this entire project so now we have to get a reference to both of our buttons here so we're just using pure vanilla JavaScript this would be probably a little bit easier depending on what framework you're using like angular or react review but we're just gonna do plain JavaScript so document get element by ID and then first element will replicate that to and this is CTA - alright so then on the button one click which is CTA this button up here when that is clicked we'll just wrap all this stuff in there so to capture that click event BTN on click equals function and then we'll paste this stuff in there alright so let's take this okay there we go so now we'll save that let's go back to our main CSS first before we use it because the CTA buttons are not gonna look good so I'm just going to copy and paste quite a bit of junk here here's what it is it's just we're referencing both the of the the CTA buttons and we're making them position element I can't even talk position:absolute so that it sits on top of that SVG graphics and margin or positioning here changing the aesthetics of it so there's nothing really interesting happening here nothing pertinent to what we're trying to achieve except for making it look decent so now we have our click Me button and there we go so now that works so this reversal though doesn't yet work so let's continue on styling that information that so shows up with the blip content so we have a paragraph tag in there so we're going to make that font size 1.2 e/m also we're gonna reference our CTA to element just to override a couple rule properties so that's going to be with Auto the margin is gonna be 30 pixels in Auto and then background will be 2 9 a be eat whoo I think I think that's what we're using yep right up there and then our actual blip container and this will be our last rule set for this entire project by the way so we have our blip it's going to be position:absolute color is the same right there and we have right so from the right of the browser it'll be about 25% top is zero and these are the values that you're going to want to change when it comes to being responsive and and in the media query so I made the opacity by the way zero because we're going to use an MTA s to fade that in and we're gonna use translate Y here to get it up and away from the content off of the browser and then we'll use an odious to push that down all right so that should be it for the aesthetics portion so as you can see nothing's happening here so what we want to do is I adjust our JavaScript so that when it's clicked then we can also call another atom right there to make that blip anime in or our blip ID so to do that we'll say annum and then our targets is the blip ID the opacity is going to go from zero to one duration we'll say 500 milliseconds would be pretty fast and then translate why 150 from its original point so I think that should be pretty good right there all right we're not done yet but let's go ahead and check all right you can see it comes down pretty fast all right so now I what we want to do I'll be if I go back this doesn't work this button right here nothing happens so how do we revert back well let's go ahead and in the documentation if you check out let's see here there's a promises section and if you're familiar with JavaScript promises then this should be kind of a no-brainer but here's an example it basically once you you create the animation right here then you can use that to create a promise and then I on the then you can go ahead in execute code like console.log or make some other animation occur all right so that's what we'll do in our case so then what we'll do is put a receive our promise equals and let's see right here yeah this is called morphing so morphing dot finished dot then and what we'll do inside of here is create a reversal of the animation above so copy this and get that indented alright so the values this time are going to revert so you have to think in the opposite essentially so the last value that we want to end up with is actually the starting value located up here alright so we'll copy this right there and then it's going to the middle value which I believe we can leave right there but we'll find out shortly oh no oh that's because I didn't wrap it inside of a click event so let's just do that real quick let's just copy this clip event up here this code so this would be button 2 on click there we go sorry about that like what the hell happened all right all right so now refresh go back and this isn't hidden so we need to reverse that so we'll come back after this click event or inside of it rather will copy real quickly this section all right and then our target is the blip the opacity goes back to zero and the duration will say 500 and translate is going to be negative 800 back to the default position so now everything should be as it needs to be all right so hopefully you found that useful I going forward I'm definitely going to be incorporating these type of techniques in my own projects and also doing more tutorials on this sort of thing and also in relation to other frameworks like react view and angular alright so if you enjoyed it please leave a comment like it and subscribe most importantly and I'll see you soon

Channel: DesignCourse

Views: 88,361

Keywords: svg morphing, svg morph, svg tutorial, animejs, animejs tutorial, anime.js, anime.js tutorial, morph svg, svg, morphing svg, on click, javascript svg, svg javascript, svg animation, javascript, svg web design, coursetro, design course, svg background, svg website, web design

Id: 2wr1iixy20I

Length: 23min 50sec (1430 seconds)

Published: Mon May 07 2018