Using Adobe XD Auto-Animate & Delay to Create Complex UI Animation Sequences

Key Takeaways

today you're gonna learn how to create complex sequence animations with Adobe experience design oh and hey I'd like to point out this videos awesome sponsor skill share calm which offers thousands of classes in design coding business and more for instance you're about to watch this quick video on Adobe XD but you could watch this full xD course at skill share now skill share is just ten bucks a month but if you're the first 200 students to use my very exclusive link below in the description here in YouTube did you get the first two months free alright so let's get started hey everyone Garry Simon of course at Rosso it's been a massive week for Adobe and Adobe experience design in particular and I've had some time to really play around with the new feature specifically auto animate for animating your prototypes initially when I saw it and realized how simple it was I thought that well it's kind of simple it's gonna be you know you you're gonna be confined to very simple animations and you know you can won't be able to do anything too cool with it but then I realized you really can I so let me show you real quickly here in the browser exactly what I'm talking about or the desktop rather so if I play this I this animation that were or this prototype we're about to create watch this so this is obviously entirely in Adobe experience design so we click on this and we have a cascading or a kind of like a sequence animation occurring right off the bat so we click it notice how the menu items will kind of come in one by one all right and then also notice right after that we have this animation occurring which is also very slick as well so click it and then it shows up and we can control all these parameters now let's click on services look at that I obviously I creating this stuff you know when you're actually in production in working with code that would be one thing but now you can so easily create these prototypes about how you envision the app should respond based on user interaction and this is a massive step forward in my opinion and so I'm gonna show you exactly how we create this right here alright so for today's question what do you use for animating your UIs straight-up CSS or perhaps you use some sort of CSS or a JavaScript based animation library let me know in the comments and let's get started alright so I have a brand new artboard open here I just click on the default iPhone six seven eight I sort of artboard I'm gonna make it a little bit larger and also copy the height so that we can have the viewport height equal the same all right so I'm not going to really spend a lot of time on the actual UI itself because I want to demonstrate and show how to use the features themselves having said that we need to get at least something on here to you so I'm gonna take a rectangle tool and draw out just same size as the artboard and we're gonna with it selected I'm actually gonna use one of my installed plugins so if you go to plugins here which is obviously one of the brand new features only a couple days old from Adobe XD will see that we have plugins here and we have one called photo splash so if you don't currently have this installed you just go to discover plugins and then you just type in photo splash right here and then click install after that you don't even have to reload at all all you have to do is go to plugins with that selected make sure you have that that rectangle selected and go to photos splash right here alright so the way this is set up is you have I two options here on the side just random photos every time you click it it's going to generate a random photo or you can search for specific photos right here in our contest it doesn't even really matter originally I was using a guitar I think here find photos I'm just gonna use this one and then hit apply there we go no more searching in a separate browser and then dragging things in manually awesome stuff so what we'll do is just I take this down a notch but before I do that we're going to create a another one real quick or instead of doing that we'll just take the art board itself and we'll get a kind of just a dark absolutely dark color right there all right and then we'll take down this opacity well one second sorry I'm screwing around here make it like a a mid gray color right around there there there we go that's what I wanted something that's just kind of gray but a watermark type of background real quickly I'll just put in a sort of watermark logo I'm gonna use white for the color will use montserrat for the font and make it bold all right and then let's stick it right there and then we'll have a hamburger icon menu except I'm going to do a trendy way it's not going to just be three equal lengths we'll have one come on around here we'll make this white take the size to two well duplicate it control D make this one a little bit longer this way and then control D as well make it like that all right so with that I selected those three control G to group those and then we use the keyboard arrow keys to make sure it's all lined up and with equal whitespace and all that good stuff awesome so now that's all the setup that we're gonna do with this for this background we can go ahead and just lock that so we don't get same thing with the logo we don't need that selected at all either all right so let's say for instance we wanted to simulate you know what happens when an individual clicks on the menu all right so let's go ahead and take this and we're going to duplicate it ctrl D all right so when we do that we're gonna right here just draw out kind of just a vertical menu of sorts all right so I'm gonna take the rectangle tool come out to right around here kind of like a 2/3 sort of column situation we'll take this and we're gonna make it black actually no we're gonna make it a little bit off block there we go I like that and then we'll go ahead and we're gonna zoom up here I'm gonna take the line tool hold shift for a 45 degree angle right around there make it white sighs - for the stroke and then real quickly we'll duplicate it and then we'll take this hold shift just that top anchor point and then move it into place now we have our little X right here so with that selected we're gonna hit ctrl G to group that up and also we'll move it into place where it needs to be roughly right around there awesome okay so now after that we're going to put in some of our menu items so when you construct the menu items you can make them all part of the same text layer but if you want to individually kind of animate and control each menu item then you're going to want to make sure there's separate items separate text layers themselves so we're gonna put in home hit escape control d hit V for move and then hold shift and I'd say you're ready to round there's pretty good the next one will be services escape control D hold shift scale down we have our equal spacing between them the next one's going to be about us you know the drill at this point and then finally contact all right awesome so a couple things - I pay attention to is when you're doing this you want to make sure that I if we want to animate this in for instance on when somebody clicks on this and we want to have this this I this navigation of sorts like the whole panel kind of just kind of move in from the side as well as maybe animate these individually you have to make sure that at first all these elements have to be on this artboard as well this very initial artboard otherwise it doesn't know how to go from point A to point B so the way these are is kind of just basic tweens in a sense that you should have a starting and you have an ending point well right now we have an ending point but we don't have a starting point so we're gonna take these and make sure nothing else is selected here so for instance we have our rectangle 1 make sure nothing else is selected up this right here that I know this part there's the this thing right here we do not want that at all which is it's called group 1 so if we I select everything we don't want to select Group 1 so we can't just lock that all right so now we select only what we want so for instance if I select everything here but it's still being selected there we go now it's not selected anymore all right so now what we can do is I we're gonna go ahead and we're gonna hit control g8 to group everything up together all right so this is an important step all right because you don't have to do with this a but when you go to duplicate this it's gonna make it life a little bit difficult because you're gonna have to rename these layers to make sure they match up and you'll see what I mean so now that we had just have this group 3 we could just call this nav right here well duplicate it and we're just gonna drag it into this one right here all right so we have nav here and we have nav here as well so that's exactly what we want anything we want to animate what we want to make sure that the layer names match up all right so where is this going to be going from well but a fault I we don't want to see this at all so we're gonna be dropping the opacity completely off for all these elements but before we change that we're gonna change the position of a few of these elements in and of themselves so first off I'm gonna move everything pretty much off-screen maybe right around here now when you move these things off make sure that they don't go outside of the particular artboard or it won't work so then what we'll do is I'm gonna take I'm gonna double-click on this home right here I will take all of them so all 4 of these I'm just gonna move them over just a little bit and then I'm going to hold shift and select that in order to deselect home we move this over a little bit more and you could do this vertically as well as horizontally so the way these are gonna work is these are gonna connects cascade in horizontally because I'm changing the physical distance between them alright so contact will fade in or come in last because these this is further away from its original distance over here alright so that seems pretty good to me right now now we'll take the whole group right here and we're just gonna take the opacity of everything and drop it off awesome so I think at this point we're ready to do our first kind of prototype so what we'll do is when somebody clicks this I'm going to drag it to this artboard we're gonna make the trigger a tap and the action is going to be auto animate all right so we also have the easing and the easing you could play around with it will affect the animation and how that works and then also the duration of the animation itself let's make this like 0.6 all right we're just gonna leave it at ease out and then let's hit play to see how this works so we're gonna come over here click it alright it's a very subtle let's try it again but it works let's make it maybe last a little bit longer just so we could see the effect because it is very subtle although that is sort of ideal you don't want to overdo your animations and your you eyes and such but I will just set this at one second here so we'll be able to see the effect a little bit more in this manner there we go now of course if we change the easing options here like I will try windup all right that's one option but I think we're gonna set at I will just do ease in all right so next how about when we want to exit out of there we can do that as well all we have to do is select this right here make it go back and it will remember that is on animate and it'll just remember all the settings so when we hit I play there we go now that is awesome now let's say for instance that you wanted to have a little bit more of a complex animation sequence occurring here in the in the sense that maybe right after these cascade in there be a brief pause and you'll have maybe a search area show up down here first before I do that though I'm getting annoyed with the alignment right here I want to make these a little bit closer to this edge all right and everything should still work after you making these changes so what we'll do is we're going to go back to the design tab and duplicate this and we're going to create a rectangle right here so a rounded rectangle will go right here all right and we're going to drink bring a drag those corners in all the way and we'll take the fill somewhere right around there four oh four oh four oh four the hex code all right and real quickly we're gonna create a magnifying glass icon we'll make this white and we'll make the size two just to keep things consistent and then we'll take the eye line tool just to create the bottom handle portion of that so let's go ahead and take those two hit ctrl G and we'll put this right there all right so what we can do if you want to have more sequence based animations take place through Auto anim it's use a delay all right so remember though if we want this to kind of maybe just grow well to exist on the artboard as well there has to be a point a and then a point B obviously a start and an end so to do that we'll go ahead and first we will take these two elements and group them ctrl G all right so let's just call this search now let's duplicate this all right so we'll ctrl D to duplicate search and we're going to put it right here and the change that we're gonna make is first we're gonna pull this all the way in and then also we'll take the whole group itself and we'll take the opacity down all right so let's go to our prototype tab and I will take this we'll drag this artboard over to this artboard we have auto animate but the triggers not going to be a tap it's going to be a time with a zero delay alright so let's try that maybe we'll make it a point six seconds duration and hit play so we click it and there we go awesome stuff so hopefully you're now starting to realize the app you know the power of being able to do this I what we can do real quickly is we'll take this and if they hit X out of here it will take them back let's just say to this one now because we've done that and we've gone from this third artboard to the first artboard which doesn't currently have this part the animation might not be ideal but just to show you yeah we just saw right there so if we click it and then we click X it kind of just fades off but so you would want to account for that in this artboard but we'll keep on going anyhow so let's say we also wanted to just to gain more experience with auto animate let's say we also wanted to simulate what happens when somebody clicks on the services button alright so let's go back to design and hit control D and let's go ahead and say ok somebody clicks on services the first thing that's going to happen is we're going to extend this entire background right there alright and because they click services something unique is going to happen with it so what I'll do is take these three the other three right here we're going to push them to the right and just double click because they're in a group just to access that given layer and then we'll take them and we are going to hide them and then as for this section right here we'll take it and then hide it as well all right so let's I give this a shot we have to go to prototype select services it's a tap trigger with auto animate and we'll say we'll leave it at six seconds so let's hit play services look at that so now let's say also I this is kind of silly though because if you're just left with this is horrible usability so or user experience so let's go ahead and duplicate this in our design tab and what we'll do is we'll move this one up yeah right around there is fine all right so again this is our starting point I'll start here and then it'll move up so it's going over here from I right to left and then up all right so after that let's also add a couple more things that will happen or animate in so take this text area here and I'm just going to type in what we can do for you okay whatever some type of catchy headlines here right we'll bring this in yeah right around there looks good and I just wanted one more other UI element so real quickly I will just take this rectangle tool put this around here maybe we will go real quickly to our plugins because life is a lot easier now with the plugins I'm just gonna put like a random here there we go wait maybe we can use a Harambee there there we go awesome oh that's great okay so let's get rid of that border alright so we'll say that when this fades up as well or this moves up we want this stuff to move up as you know along with it so remember there has to be a starting point this is point B we need a point a so we'll take both of these and let's go ahead and I want to rename this or let's see here this one will just call this Gore and then we'll duplicate duplicate both of these ctrl D move them into here and we're gonna position them down so that they will actually come up and then we're gonna take the opacity down as well and this one will make it come down even further so create kind of like a almost like a parallax effect alright so yeah we should be pretty good here let's go to prototype and this is going to be a time-based idle a so no delay here and we want this to be instant so choose zero no come on now zero point zero s or 0s there we go and then we can leave this at ease in let's try one second and let's give this a shot hit Play services look at that awesome awesome stuff so now let's say just to wrap this up let's see what happens let's try to make this ex work so what will the ex do alright well if we make it go back to this right here it's simply just going to end up going back to our services and it'll create kind of like a loop actually I think it will I never really tried that let's just try it on a tap it's gonna auto animate and then it's gonna go back to this but this has a time trigger automatically applied to it so I'm expecting a loop so let's select this artboard and then hit X yeah it's gonna be a loop no matter what so how do we fix that all right well what we can do is let's go ahead and sever that connection here oh wait no we want that there this one we don't we don't want the connection going there what we'll do instead is duplicate this let's just drag it down here all right and what we'll do here instead of having this time trigger we'll have the time trigger except it's gonna go over here now all right so it's a time-based trigger and it's Auto animate all right so now what we can do is I we could take this make it go here instead and it should work as expected so let's give this a shot hit Play services hit X look at that I can't believe it worked the first time without me screwing something up but that's how freaking easy this is and it's immensely powerful to create really just almost anything you can imagine I I can only match the two as they start to add more to this it'll definitely be quite powerful all right so hopefully you found that useful and now you have a new skill set under your belt and this is gonna be so much fun for myself I know specifically to play around with so make sure you answer today's question which is what do you use to animate your UI straight up CSS or perhaps some CSS or JavaScript animation library let me know in the comments make sure you subscribe of course if you enjoyed this and I'll see you guys soon with a new video [Music] [Music]