Recreating Adobe XD Animations in the Browser with GSAP (Awesome!)

today I'm going to show you how to create a XD animation prototype and then make it a reality in the browser just like this before we begin to when to mention this video sponsor Skillshare comm which is an online learning community for creators with over 25,000 classes in design business and more so whether you want to feel your curiosity your creativity or even your career skill share is the perfect place to do just that for instance you're about to watch my tutorial on Adobe XD but you could watch all of these Adobe XD courses at Skillshare he'll share is also super affordable with an annual subscription of being less than 10 bucks a month but if you're one of the first 500 people to click on the link here in the description in YouTube then you get the first two months 100% free so join up hey everyone what's up Gary Simon of course satchel calm so today we have a good one for you we're gonna be hopping into Adobe XD initially and let me show you real quickly alright to create this so we have we're going to be using all the shape creation tools to create this entire composition from scratch and then we're going to use Adobe XDS prototype and auto animate feature to create an animation like this and then we're gonna hop into a code editor as best we can in order to recreate that animation in the browser so just to show you that one more time what we'll be creating and you can see it's a better animation as well because we have much more control over it with the use of G SAP alright so let's go ahead and get started but first make sure to subscribe alright so let's get started here in the opening dialog for Adobe XD I'm just going to choose web 1920 I right here the size really isn't all that important I may adjust it in I'm just going to take this artboard hold alt and just kind of drag it in more to like a square perspective almost we can get rid of that sidebar for a second and let's give it a background because I don't want it white I don't know I just decided out of nowhere that I want it to have kind of my my signature colors for Osetra branding least and that's right around Nana that's 0-5 see 7/8 B all right so you just add it to our swatch just by clicking applause all right so let's get started here oh by the way you know what before I do that we're not gonna have we're gonna make the fill white I forgot because I want to have a grid square grid and we're gonna take the square size up to around yeah around 39 is fine and the reason I'm doing that is because I want you to guys if you know for those of you who want to be able to follow along I'm I want you to be able to draw the same exact shape that I'm doing so we're gonna do like this sushi sorta bald bull that designed that you saw before I find that I prefer using something like Adobe Illustrator for vector artwork but you can still get by using the tools provided here in Adobe XD you just don't have as many options so we'll take the pen tool and we're gonna create that bull shape first so I'm going to just left-click right around here in the center I just one of the grid points or where they intersect anywhere and then we're just gonna create probably gonna go out right here about three grid I columns and I'm also gonna left click and drag so you don't let go when you do that by the way probably yeah right around there so we're dragging this Bezier curve up just one grid point holding shift by the way for a 45 degree angle alright so then we're gonna come out let's say 1 2 3 & 4 I think that'll be pretty good right there alright and then we're gonna come back to the center we can see we have the guide there left-click and drag hold shift to make sure you're on a flat area and we're going to go all the way out to where the very left point over here is showing I right to where the previous Anchor Point was just like at now you could just go all the way back around and let's give that a shot actually we're coming back down here remember we held shift does that look correct actually that looks pretty good I think we'll just stick with that before I was planning on just having a stop there and replicate this then flip it and then join them but I think we'll just I yeah this is good here all right cool for the size we're gonna just crank this up maybe to around eight all right and we're not done yet I want to create the actual lid portion going this way so doing the same technique we're gonna left click right here we're gonna come down one grid point right here hold shift left click all the way out and then join it right back up there hit escape unfortunately XD doesn't remember your previous like border size so we'll just go back up to 8 like that and that looks pretty good to me right there alright it's awesome so now we have the the basic bowl shape down and this is what it looks pretty large party scale it down in a bit but I now what we want to do is create the kind of the chopsticks alright so we don't need the grid anymore at this point so what I'll do is click on our artboard and deselect that okay oops I see an issue why is that happening so let me I so I shifted it over by selecting a double clicked into it to select the the Anchor Point and I just left clicked and I I hit the left arrow key just once so also sometimes you can see this part isn't ideal up here so we can probably just take this whole shape right here and I push it up just a little bit there okay now let's do those chopsticks by the way we can at this point let's get our background color going here so we'll take these two and we'll take a border and make it white you might want to go thicker on this as well so up to twelve there okay so now let's do this chopsticks real quick we will I'm just going to come over here temporarily let's see I'm just holding shift and it's just a slight Bezier curve we're gonna make it a thicker I'm just going to go straight up and then connect in let me do that again here alright and then we will use just a fill for this and I'm going to take this and duplicate it control D I'm going to left click hold it hold alt and then just flip it essentially alright so now we have this chopstick sort of shape and then we can take both of them and just choose I ad and that will make them basically the same shape and so we can increase the size of this like that alright then alright let's go ahead and duplicate this control D we'll just rotate it slightly like that awesome awesome stuff so let's get this eye centered up there we go right there now let's do some sushi so a way I thought about doing this is we're gonna take kind of like this oval shape we'll get rid of the stroke control D to do to duplicate it hold shift and drag that down and I'm gonna take a square and start right there where it intersects left-click and drag all the way out to the same area get rid of that fill very frustrating that this fills are added like that I'm gonna take this top one right here duplicate it just for a second and scale it down we can't see it yet I will make it I well we're gonna leave it white actually we're going to take these three and we're going to merge them and we're gonna make these kind of like a dark gray so now we can see this top shape up here from which we can alter a little bit and there we go that's our eye our sushi you could probably add a little color in there like it typically is like the Reds and stuff but I'm choosing not to do that just to keep it simple okay so now with that ready to go let's group that control G we'll get this placed in here so I'll put maybe one just like sit down duplicate it just put it in a different orientation maybe make it slightly smaller something like that that's fine actually I mean make this a little bit bigger okay sorry I'm being a little bit anal about this ah come on Gary get this done go on come on come on come on and take both of them and move them over oops this isn't grouped up that's fine right there okay okay so now what we'll do is we will create just a couple more elements just to kind of give it a little bit of background texture if you will so I'll take the ellipse and drag out a size right around there we're going to take the opacity down quite a bit all right and we're going to open up our layers make sure this is in the back we'll duplicate this maybe just put one up here I like that and then finally we'll do like a sort of a shadow an interesting sort of shadow being cast from this eye Bowl essentially so I'm just gonna draw out kind of like what I think a shadow might look like being cast from this bowl I don't like that come on maybe right around there and I'll just connect that up and we will make this this color except just drop it down and also that looks bad we got to put this in the back actually we'll put it right there okay and then we'll experiment with the the color here and again if you need to make adjustments like this should be a lot smoother you can double click into it too I just the anchor points and such by the way if you're taking if you want to just adjust one of the angles you hold alt in order to do that all right so I'm happy with that and now let's go through these and I'm going to I update the names which is going to help us when it comes to exporting this stuff and working with the SVG code itself alright so what we'll do here this is going to be I'll call it sushi 1 sushi - next up is chopstick one chopstick - I this is going to be all three of these are going to be as a part of a group so we're going to group that up and we're gonna call this bowl and these these three are its own thing so when you're grouping things up think about how you want these to animate in I I think just having these three come in at the same time as fine so that's why I'm making them those three a part of it these two elements right here we'll just call this BG 1 and then BG 2 all right ok great so now let's simulate kind of like how we would want this animation to appear so what we'll do is I'm going to take everything and get this centered up right there okay great so we're going to basically move these elements off or to the position where we want them to start so the first one that's going to come in is this group and we're just gonna push it probably right over here so it's going to slide in from opacity:0 from the left all right next up we're gonna have the actual sushi items start up here and I will yeah kind of offset them like that and then oh by the way we'll put a pasty zero these will come in from the right at the end opacity zero and then our chopsticks they'll also come from the top and just to change up the animation we can just make a small adjustment here all right like that and opacity zero so now we duplicate it and we work on our getting our bowl into place so we'll bring back the opacity and we're going to move it over roughly in the center and make sure you hold shift while you do that because you want to slide in perfectly on that horizontal axis or the x-axis and so that's good right there so now we can even just go to prototype and use a timed trigger right there with a zero second delay and maybe we'll make this 0.6 and ease-out we'll try these out you know action needs to be auto animate so now we hit play oh and by the way let's give that a delay initially so it doesn't start right exactly when so let's do point six seconds here for the delay there I like that so of course you can experiment with the different easing of this and we will here in a second so let's duplicate that board and then we're gonna have next the bits of sushi coming in falling in all right so let's see here for now I'm just gonna move this over just a tad bit and to make it more interesting you can modify these things however you wish and so now let's go over to prototype we'll get this with the same time with a zero second delay so zero point zero s enter and then this will try doing easing zuv bounce so they should kind of look like they're bouncing so it's it play there we go kind of silly we could probably make that a little bit longer so let's try one second and by the way when we get this into my actual HTML and CSS and JavaScript we can make these bounce a little bit more realistic and independently instead of both of them coming in at the same time all right that's good though so now go back here we'll duplicate this one will make the chopsticks come in select both of them we'll take this one this is the one that we kind of modified slightly great around there's good again go back to prototype and make these come in like 0.6 seconds and we don't want to balance let's just do try ease out oops no delay and let's try this now okay and then finally we'll have our remaining elements which is the background elements come in I actually kind of don't like that white maybe we should do this and just make it darker or lighter and I don't know I'm gonna copy this we're gonna save that there so that's 18 percent let that fill color where's the other one we'll do the same thing over here so this is 18 percent my dogs barking downstairs of course now when you do this technically you should be adjusting these as well but let's just give this a shot just to see what happens here so 0.6 seconds maybe we'll just make this one second I think that'll be probably good right there let's give it a shot oh let's go back make sure the none of this artboards are selected all right that's good enough for me just kind of like a prototype animation it's not going to be what the final result is but I'm happy with that so far so now what we'll do is all right we could take all these let's go to design here take all these and right click and export them but there's a one thing I want to do real quickly and that is I'm gonna add just in this artboard a kind of like a rectangle or a square that kind of goes around everything I'm going to hide the border and the fill so that we just have this element right here so that if I move this over it's kind of framing everything so that the whole composition is in the center of this square piece right here I'm gonna put this at the bottom will call this frame and I find that just it's a real quick and easy way once we act we go to import this this graphic into code I and positioning it up in in in the viewport I it makes it a lot easier you'll see what I mean so we're just gonna leave that empty frame here and we're gonna take all this and group it and we're just call this sushi now we're ready to export and we're gonna make it SVG and let's go and make sure you create a a code folder so I'm gonna call this sushi and we're gonna create an images folder inside of it and select folder and export awesome so now we're done with Adobe XD I go ahead and save this if you wish and now let's get up our code editor so I'm going to choose new window I'm using Visual Studio code by the way it's a free code editor from Microsoft quite popular and we're going to open a folder alright so now let's get coding let's create an index study HTML let's create a folder of CSS with a file called main dot sass scss you're going to need two sass extension so if you come over here to extensions and type in sass I you can install this one right here I believe that's the one or live sass perhaps live stats compiler that's the one you want to install you're also going to want the live server or live reload so I believe it is this one right here live server install that as well reload and UHN we're going to use that in momentarily and no coding here for now let's go back to index.html hit exclamation point for some quick boilerplate we're gonna link up our main dot CSS which doesn't yet exist click on here click watch sass again you're gonna have to have that sass extension installed for that to work now we can see our main da CSS file and all is good so far alright so before we get coding we're going to actually yeah let's hop into our sushi SVG graphic right here we're going to take all that so ctrl a ctrl C to copy and then paste that right here so first of all we can get rid of this SVG the this attribute the xmlns we don't need that and if we just saved this right now and we open with live server after you've installed that live server plug-in momentarily and computers being really slow okay we can't see it because we designed it for a white background I mean for a different background so if we go back to our Adobe XD you can grab that color code right here sorry my computer is making noises I'm going to grab that which is 0 5 C 7 8 B and we're going to go to our main CSS domain to SAS file it's close that out we don't write her CSS there and we're going to just put in a couple rule sets so first body and HTML we're gonna set the height to 100% and then our body we're going to set our background to that color right there so now we can see it in all of its glory okay that's the SVG graphic itself so there's a few other properties we want to specify here and I'm just going to paste those in and I'll describe what's happening here so first I control B to get rid of that sidebar we're just having text-align:center because we are gonna have text in there margin zero to get rid of default margin from the browser's and then also these three properties right here I display grid justify items Center a line item center and that will basically allow us to Center that SVG graphic in the browser horizontally and vertically which is what these do alright so now we can save this now it's centered up as it should be okay so now we'll hop back in here for only one more rule set just for the h1 element which we don't yet have okay so what we'll do is now let's get imported our ji snap all right so we're going to use the CDN for this you could use the NPM to install it for a more robust dev environment but I'm just going to paste these two right in here now by the way you you have access to the code pen for this tutorial so it's going to be in the YouTube description you can click on it and then I you can click on the little cog icon in code pen next to the JavaScript section you can grab these linked are these links right here so these are the two that we need to import we have tween Max and then timeline Max as well to import then we'll have a script tag and this is where we're gonna write our very simple JavaScript for this using timeline max in tween max so I first we're going to create an instance of timeline Max so we're gonna save our TL for timeline there's a new timeline max alright so this is fine so we're going to do TL and we have a couple methods that we can choose from from or two so I'm gonna choose from because right now the way we have our SVG set up it's it's in it's in the end state essentially all these elements are where they are going to end up being I as a part of the composition so we want to choose the from method and when you specify the from method its saying take it from wherever we're about to place it and then it would go to wherever it is in its default location if that makes sense if you chose to for instance it would have the opposite effect so it would start out where it is currently and then go to wherever you tell it to so we're just gonna choose from and we're going to specify our Bowl ID so if we come up here we see our Bowl remember that's the first thing that we want to enemy in from the left alright so that's the first parameter next parameter is the duration so we'll just say 1 for that on one second essentially and then we have an array and we're going to put in X X means on the x-axis to the horizontal axis and we're going to need to put in around negative 80 also opacity will be zero and we can also add some custom easing x' for this but we're not going to do that just yet we're going to leave this here is so let's save this and we're gonna go refresh this and there we go I actually want this to come in further so depending on how large you made your graphic you you may have to adjust your values may have to be different from them mine I'm gonna try like 140 so now let's refresh that we could go even go probably even more like 190 refresh all right that's cool now that's just a very linear based easing so we could choose the ease option here and this is where I want to show you before I fill this in the G SAP easing is that we have available to use G SAP easing so just type that in Google you'll find that first link and it will show you all these easing options so power 1 power 2 it'll start out slow and then kind of I know I mean I'm sorry it's going to start out fast and then end up slow so the one that I think we're gonna use this power one and then there's also a type of ease in ease and out or ease out all right so this is set source using G set police this is kind of how you can match up the easing is in Adobe XD and translate them into final code so we're gonna use just power 1 ease out so here's how you do that we're gonna put power 1 ease out sweet now the animation is it the way it comes in its gonna come in faster and then end up slower okay you would see that even more if we chose like power for ease out so it comes in like real fast and then kind of gets lower so we're going to leave that up there paraone now I'm gonna hold shift alt and then hit the down arrow key to replicate that line and next we're gonna do sushi one remember we have all our IDs right here so we have sushi one here and two there okay so the sushi will be one second as well we're gonna come in from the Y access member cups coming from the top and we're gonna choose let's try just negative 200 actually it's do you like 250 and then the opacity will be zero as well what we're gonna add a few other properties we're gonna add in rotation because I want these to rotate maybe by 20 degrees and then also I will leave that there for now but we're gonna add another adjustment a different take on this in a second okay so that doesn't bounce at all does it so if we go back to our easing page we can choose right here bounce now isn't that cool so it tells you the code down here by the way so it's like ease it would be bounced ease out so let's try that so it's going to be bounce studies out now look at that I like that awesome so now let's replicate that line sushi 2 and let's do oh and by the way let's let's say before we do that you can also add in an offset what it's called when it comes to G SAP so right now this right here this line this sushi animation will only occur after the full 1 second from the previous I call essentially has been completed well you can actually make them go simultaneously or create an offset a bit if you at the very end put it in comma and then we're gonna put in eyes our single quote and we're going to put nay of equals point let's say four so essentially this will go for 0.6 seconds and then this one will start coming in even though this one's not yet done animating so we'll save that it's a little bit hard to tell but it actually is coming right when this is still moving now you could also put I I believe plus here and that will have the opposite effect it's going to wait point four seconds after the full one second over here has finished but we're gonna leave that at negative now let's replicate that line and we're going to choose this one point seven this is going to be to the Y of this one will be at the same essentially and then rotation let's make it like negative seventy and hit save now the way this is rotating we need to add another property because it's not quite right like if I do 270 for instance it looks really weird it's like coming off over here what we have to do is add transform origin we want it to be the center of the object itself for the rotation so we put in 50% 50% and you really you could add this to this one as well we just don't see it as it much because we're not rotating it as quite as much here so let's do 70 here there we go alright next let's make our chopsticks come in so if it's chopstick one I believe and for this we're going to have let's see here we'll do this make these come in faster like a point four and these again are on the y-axis I think we'll just leave it at 250 the rotation of this one will just say 20 again and we don't want these to bounce so we'll just use our power 1yz and for this I offset again just 0.7 let's also while we're here replicate that line just do the second one real quick so these are both going to be 0.4 let's do 300 here we'll do like negative 60 here and this will be like 0.6 let's save it and see what happens now all right all right we're almost done now we just have two more which is the background elements so we have bg1 bg1 we'll have this come in at one second the why no we're gonna do X here so we'll have X we'll try 500 you may have to adjust this afterwards we don't need rotation or transform origin these are just circles anyways I think 0.7 negative offset will work there let's save this and just see what happens so it's gonna be that smaller one I think I want it to come in from the opposite direction so we're gonna have to go up to like 1200 all right that's cool 1100 it is okay and then we'll replicate that to BG to both at point seven well haven't come at the same time or almost same time and then for this one I think we'll do like I wanna see what happens when we put in 900 a lot of this is about experimenting okay so if I do like 100 because it's such a large object already there we go I kind of like that now finally let's add an h1 element and we'll do it right underneath our SVG closing fcg tag and we'll just say your sushi is ready now I'm going to paste in a rule set real quickly for one element technically we didn't even need SAS cuz I wasn't using any SAS specific features but whatever habits so we're just making the color white montserrat of course you're gonna need to import that if you don't have it installed on your machine or if you intend to use us live fontsize to e/m position:absolute text-align:center with 100% top 20% i may have to adjust these values but we'll see how it looks so let's check this out now okay cool so what if we wanted to make this animate as well with G sab well we just come in and the very bottom here will replicate just one of these lines will separate it out just a bit because it is a different type of element and we'll say we'll reference our h1 element this will come in for two seconds the y let's try 150 opacity power four we'll try that and a whole second of offset look at that now what's really cool is this works as it should be responsive oh no it's not responsive let me make sure oh I know why we have to come up here and we have to adjust I believe they need to make the at the width a hundred percent so let's refresh that and there we go now the type itself isn't responsive because we haven't used CSS media queries for that but everything else is responsive in terms of the animation here so let's watch it one more time and there we go as you can see if we go back to Adobe XD and we hit play I definitely like the animations that we have in this version because we have so much more control awesome awesome stuff alright so hopefully you enjoyed that I know it was lengthy but now hopefully you have a sort of a workflow from which you can create a design in Adobe XD and also create a basic animation and then finally realize it in the browser with Jesus all right I'll see you guys soon make sure to subscribe and goodbye [Music] [Music]

Channel: DesignCourse

Views: 33,095

Keywords: adobe xd, adobe xd tutorial, adobe xd animation tutorial, adobe xd animations, adobe xd auto animate, gsap, gsap tutorial, greensock tutorial, greensock animatio platform, adobe xd gsap, adobe xd javascript, adobe xd prototyping, adobe xd prototype, adobe xd svg tutorial, svg tutorial, svg animation, svg animation tutorial

Id: THDZW96GQaI

Length: 39min 32sec (2372 seconds)

Published: Fri May 03 2019