Adobe XD Tutorials

Using Anime.js to Create SVG Morphing Page Transitions with Vanilla JS!

today you're going to learn how to create morphing SVG page transition animations before we begin this video sponsor is bookmark comm which is a free

website builder that uses artificial intelligence to create websites right in front of your eyes the entire process is less than two minutes and it only consists of answering seven simple

questions and if you need to sell stuff you can create an online store very easily it's really cool I recommend it so check out bookmark comm today hey everyone Gary Simon of course Etro so

today we're gonna take a look at using anime s to help us create SVG morphing based AIDS transition animations boy that's a mouthful but this is what we're going to be creating and you can see how

the the the SVG itself is morphing and it just provides a very interesting sort of aesthetic alright so I'm not going to be using any of the the major front-end JavaScript frameworks for this I wanted

to keep it a framework or library agnostic you know I'm so we're gonna be using pure vanilla JavaScript alright going forward though I do want to do this sort of thing I with you know react

angular in view but for now we're just gonna keep it simple so for today's question what software do you use to create SVG's is it something like illustrator or Adobe XD even let me know

in the comments make sure you subscribe and let's get started alright so I'm going to start here in Adobe XD although you can use any type of vector drawing application that allows you to export

SVG such as Adobe Illustrator to do this step and it's going to be very simple all we have to ask ourself is you know how many anchor points do we want our SVG graphic to be and you know how do we

want it to look when while it's coming down or transitioning into the next page or whatever so I have the pen tool out here and by the way this is a web 1920 preset so when you go to open up Adobe

XD you can just choose that if you wish and so I'm gonna start here at the very upper left and I'm going to come down here to the middle kind of to get an idea of what I want it to look like when

it's through the middle of the transition alright so I'm gonna come just around here some I think I you know we'll do this we'll make this a little bit more dynamic

initially only had one anchor point here in the center but I think we'll do two different Bezier curves so I think that might end up being about three yeah three total anchor points coming out

here in the middle so I'm just holding shift for this and left clicking and dragging out I'm not too concerned with it being perfect and I can always adjust these afterwards oops

and that's something like right here I pi will make adjustments to this I'm just holding shift now and then coming back up to the top and just so we could see it better I'm gonna fill it in with

a color this isn't going to be the actual color the only thing we're going to be taking from this are the SVG coordinates and you'll see that in a second yes something like that all right

I don't like this area over here you can always adjust these let's see if you hold alt you can control just the right portion of the Bezier or the left that's fine I'm not going to get too critical

over this so this will be we're gonna do basically three a three-step SVG animation this is the middle step going from either you know when it's all the way up here and you can't see it and

then when the user clicks on it it's gonna go to this step right here and then also to a final step down here we're just completely filled out so it's a matter of adjusting these anchor

points for the beginning and end so that you can't see it up here and it's basically all in the same line and then you can't see it down here either all right so what I want to do I think a

good approach possibly to tackling this is we're gonna ctrl D to duplicate this and we're gonna do that one more time for the bottom so what I'll do is take this

I'm gonna take all these anchor points hold shift and just drag them up just like this all right so now they essentially cannot be seen if you do see a little bit like that at the top that's

okay you could still use CSS to hide it or use opacity or something like that so then what we'll do is I'm gonna take this duplicate that drag this down I'm just dragging these all down and it does

snap at the end so that you can get right there all right so there's a plugin for Adobe XD and it is plugins let's go to manage plugins type what's good all plug-in to type in SVG and it's

called copy SVG code so you can install that then you just select your SVG graphic and hold ctrl all in C and that will run it or you can just go directly to the plug-in through the plugins menu

over here and it will just close it for some reason it doesn't show me the output I don't know what that is that's an error or something but it does copy it to your clipboard so if I go to

here and paste it into like notepad we'll see the coordinates right here all right so that's the coordinate for the for the middle coordinate what we'll do is copy just this I'm just going to make

a note here middle is that and then we'll do this one again ctrl alt + C close top now one thing to note is when you're working with these SVG's as I found because I do not have

extensive experience in this I just messing around with it recently I found that patrol see sometimes the the animations won't work as you anticipate so it may require going back in and make

adjustments after the fact so we'll see we'll worry about that after all right so that's it alright in here's Visual Studio code the code editor free from Microsoft I have a blank folder empty

folder called morph trans that have opened this up into so let's create an index dot HTML file and again as I mentioned before I'm not making this specifically any of the three big

JavaScript frameworks or libraries like react view and angular I'm gonna do that later I wanted to do then phonology Abba script and just simple straight-up HTML a little bit of sass and that's it

because I know some people will complain about that so don't worry I'll do this in the future we're gonna link up a stylesheet and a folder called CSS file called main CSS let's create that I mean

da sass right here and we'll click on watch sass once that comes up it's an extension you can install alright that's all good and alright so the first thing that I want to do real quickly is

is get in our animate jas or CSS i am j s file sorry i'm looking off screen on my other thing i'm using we're going to be for this using i'm also going to be using just to show you how to do it the

animate CSS animation library so just so you can quickly degraded and added to elements or whatever and make them come up we're gonna do that on the button that comes

up and then also to make everything work in more if the SVG we're going to be using the anime s so you can of course install that through NPM if you want if you have a more robust project but for

this we're just going to link the CDN version which is right here alright and you can always just go to google and type anime s CDN to get that quickly or from different sources I'm just going to

call this more transition there we go alright and then also just to save time while we're here I'm going to I do the same thing except this is going to be a link rel here a stylesheet and it's

hosted at CDN as well for that animate dot CSS all right this step is not necessary if you want to handle making these D animations yourself you completely free to do so I just wanted

to show how these two can obviously very easily work together all right so now what we're going to do is create our SVG element alright so SVG oh it doesn't actually give me the tag there

so SVG ID we're gonna call this morph so we can reference this height we're gonna say a hundred percent and width is going to be a hundred percent and the view box is gonna be the initial two values of

the four values are going to be starting at zero zero and then what we want to denote is the actual size of the SVG graphic itself and so if you come over here I and we click on this one the full

position will see the size which is basically 1920 by 1080 so that's what we're gonna put for that value alright and then we also want to put preserve aspect ratio is none so this

these attributes right here can allow it so that it really fills out the browser how's it supposed to for this effect alright then we're going to have a path of class equals morph and then we're

going to put D equals and make that empty for now these are going to be the coordinates of our SVG graphic and then I feel I'm going to give it a specific color code of zero zero two III a and

end it right there all right so the initial value that we want if we come back to the notepad document is our top value but I want to see what this looks like just with the middle value all

right and it's not going to look correct yet because we haven't applied CSS to it before we do that though I'm gonna put in a section with an ID of sect one for section one and then also h1 give me a

cliquey and then also a paragraph go on go already click it you hear all right and then um finally our last element is gonna be a button alright with an ID of button click and then tappy tappy

alright so we're gonna have a second section but we're not gonna worry about that right now so now what we can do I'm not going to worry about the JavaScript just yet let's go to our main sass file

alright and I'm clumping these together probably unnecessarily I did this quite quickly margin:0 padding:0 sets and all that box-sizing

border box width is gonna be a hundred percent height 100 percent font family will be montserrat and i have this installed on my system so I don't have to import it and then the background was

going to make this color code 9 ee BCD next up we're gonna have our morph let's see here reference this and make sure this is working we're gonna put in ya just our

morph selector and then our width is 100% so this isn't reference to the SVG element itself height is 100% we're gonna start at the top and left at zero the position is going to be absolute

just allow it to hover over different elements our section element and then pointer events we're gonna put none and what this does is i if we don't add pointer events none to this it won't

allow us to click on the the button that gets the transaction to start from top to bottom so pointer events none fixes that problem I mean you could you can experiment by removing that yourself

just to see what exactly that does after here we're gonna have their section position is gonna be absolute as well then our h1 elements and again nothing too crazy is having happening here so

I'm going to just simply paste this in I don't want to waste time and then also our button I'm gonna paste this in as well nothing exciting is happening here with the button that we've contained we

have a background and margin nothing nothing exciting we're gonna have a button to style as well beneath that but I'm not worried about that and I think that's good for now so let's

save that I'm gonna go to a control B take this right click open with live server and there we go so this is what it looks like initially but remember I didn't put the initial I

the right value in just because I wanted to see and make sure everything's working correctly and it is so we're gonna take this value instead and we at this point we shouldn't see it so we'll

come back to right here paste that in save it and there we go alright so obviously nothing works so let's integrate some JavaScript here and again pure vanilla JavaScript

nothing too scary here script alright so the first thing we're to do is create some variables and what I'm going to do again I'm not gonna worry about typing this all out initially these variables

just it's going to be fun for our BTN or the button click ID right here there's a second button that we haven't yet created or define in the HTML so I'll just cancel that one out we have our

section one but not yet to section two and we have our overlay which is in reference to the morph ID up here the SVG after that what we're going to do is this is where we get into our anim s so

var morphing equals annum we open up an object and first property is target's so we want this to apply to the morph class right here alright and then we're gonna put in I an array of objects right here

and denote it as D alright and D of course is the attribute all right so what we put inside of here is what this initial value will I end up animating to and you can put as many steps as you

want alright so we're just gonna have two of the steps from the middle portion right now it's at the top and then the middle and then bottom so we're going to open this up in an object value and then

we put the middle value right here and separate with a comma shift alt down and there we go so now we just have to paste in those other two values and hope it works sometimes it doesn't

when you're working with the SVG software and depending on how your your your the anchor points let's do the second one we'll put this one right here after

this we put a comma we put another property we can add easing into this and it definitely makes it more interesting there's a lot of different easing options that you can choose from when it

comes to anime or anime anime I keep on saying anime and then Quint alright ease in out Quint there are several that you can choose let me go off screen real quick and I'll show you

the list so if you just go to the github page here for nsj and go all the way down you'll see right there these are all the options that you can choose for easing in and easing out and he's in out

right here so experiment with them they could definitely change the feel and the flow of the animation taking place oh they're really cool all right um now after that we're gonna put in let's see

here a delay all right the the delay function actually we're gonna leave out delay I don't want to delay so we're gonna put creation we're gonna say thirteen hundred milliseconds

or 1.3 seconds and then loop is going to be false we know you obviously don't want it to loop and we're also going to put autoplay false however initially I'm gonna comment that out just because I

want to see this working right when we refresh the browser otherwise we're gonna put this back if we want to activate it based on a click event so we'll save that here and we'll see if it

worked haha okay and of course it didn't now notice over here to the right how it looks like it's combining these anchor points and if this doesn't look smooth

because it's kind of going fast on my screen it does look smooth on mine but the frame rate of the video may look at–look make it look a little bit choppy and knock

so what I'm gonna do is just go back to Adobe XD and I believe it's happening right down here and I believe I've kind of pinpointed the issue before so if I take this

alright save it there we go awesome alright so now let's make it so that first of all the eye we can see we could this shouldn't happen you can see how the cursor is changing we can still

access that other button and all that's us good stuff we're gonna fix that real quickly as well so what we'll do is we're gonna go to we're going to create just a click event listeners on our

button so our BTN element right here so coming down by the way will make this autoplay false alright so we'll put in our button add event listener and we're going to

add a click event the function and inside of here we're going to put in i overlay dot class list and this allows us to add classes CSS classes one called pointer and that's on our overlay which

is an ah I can't talk in reference to our morph SVG element right here alright so we have to create a class called pointer all right so the pointer it's just a very simple class let's put

pointer is pointer events auto all right so let's go back look we have to do a couple other things obviously forgot in this same a click event we have to actually make this run so the way we do

that is we created a variable called morphing set to the annum function method and we're going to put in morphing dot restart now there's also a couple other ones that you can use

different methods play play seems like you it means play would work but I found that when we're going back and forth and a little bit for the second I click event which we haven't added yet I

restart actually work because it was not working correctly before so there we go so now I what we'll do is i added in that section second section so i'm just going to copy this real quickly this is

going to be set to get that formatted better and this HTML is just gonna have a button and that's it so this is this button will be go back and the ID is going to be button to click this will be

set to let's create that rule set that i mentioned before for that second button and i'm simply going to paste in a rule set for that along with the hover and that's it right here alright also we're

going to add in a rule set for our sect to ID alright so initially we're just playing none because we don't want to see that until it comes up and shows after the

transition has occurred position:absolute z-index to to make sure sits on top of the SVG overlay and then I were descending with it fifty and then

one final rule set and it's the last bit of CSS we're going to create one just called display – it's a display block and we're gonna apply this class we're gonna add this class through JavaScript

to make this appear up here alright so we'll save that we're gonna come down and inside of our button eye right here we're gonna have one more which let's go up here and comment these out so we have

our button – and our section right here and we're going to type in let's see here we'll do SEC – class list and we're gonna add multiple classes so each separated by comma here animated display

also we're gonna put flip in Y and this is a class that's available from our our animate or yeah or animate CSS alright so if you go to google and type animate CSS you'll see all the different classes

that you can use for that and then we're also gonna make it delay by one second I what you know what I'm gonna remove that initially just so you can see why we're adding that alright and then also at

this point let's sit so let's check it out see it comes too quickly so that's why I want to add the delay and this is also another class that comes from animating the CSS that it just allows

you you know to control when the animation will take place now it should come in and that silly little animation of course is based on flip in Y alright so now let's create a button to click

here so let me save myself some coding time and paste this and this one is just simply going to be morphing Reverse so that's going to go through this right here these values and just simply

reverse them all right and then also morphing dot play you would think you only need just this reverse for it to enact but that's not so unfortunately also we're gonna

put in overlay dot class list dot remove and this is going to be we're going to be removed the pointer class so we're just kind of reverting the steps I should have just copied that there and

we're gonna change this to remove as well and there's gonna remove all these so let's save it and there we go alright so hopefully you found that useful if you have other techniques to

implement this please let me know in the comments also answer today's question which is what soft which software do you use to create SVG's r8 see you guys soon bye

[Music] [Music]

Check out Bookmark.com – https://goo.gl/mup5Av
Today’s Question: What software do you use to create SVG’s?
— In today’s video, we’re going to keep things simple and use vanilla JS to demonstrate how you can create morphing SVG-based page transitions with the help of Anime.js. There are a variety of ways to achieve this effect, and this is one such way. In the future, I will cover doing this in Angular, Vue and React.

Let’s get started!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!