Full Page Parallax Animation in Adobe XD

okay so first video of 2020 first off guys I hope you enjoyed the holidays welcome back ah feels good to be back making videos in this tutorial we're gonna jump into Adobe XD and I'm gonna show you how you can animate a full page so if you've ever seen those four pages not like this I don't know what this is I'm having some kind of seizure with my hands but if you've ever seen those full page animations that look really slick don't worry we're gonna be creating one of those in this video hey guys you're watching tasky the place to be to develop your creative skills in this tutorial we're gonna jump into Adobe XD and create an awesome full page animation you've probably seen these before on the Internet's where you scroll down a page and the animation things slide in and move well in this one specifically we're gonna be taking a full-screen image mapping it to a laptop and then as you go back it's gonna go fullscreen again it's pretty awesome and before we kick off the tutorial just as a quick favor to someone from Adobe who's helped me a ton the last two years I just wanted to let you know about the creative residency program essentially Adobe pay you for an entire year to kind of do your thing that thing you love I've got a few notes here that I'm just gonna quickly rattle off but if you would like more information or you'd like to apply there is a link in the video description ok so it's a one-year program starting May 2020 until the 15th of January all digital creative fields ui/ux illustration photography graphic design one to five years work experience participating countries Germany UK US Canada and Japan so yeah that's the creative residency program but without further ado let's jump to the screen and get started righty-o so we're now in Adobe XD we have three artboards they're all sized at 1920 by 1080 and if we zoom into the first one we have Mac OS macarena which should definitely be a thing this is going to have a full screen background image then when we go down here that image will shrink to fit the laptop display then then when we go back it will go fullscreen again we also have a headline power as power which is very apple and we're also going to have the laptop slide up here as well to reveal more of the keyboard we have some lorem ipsum text and a Buy Now call-to-action button so first things first I'm gonna click on the middle one here and we do need an image to go on our screen which happen to have one here tada so we'll drag this in to XD there we go that's pretty big so what we can do is hold down shift a scale is proportionally and we can also hold down alt or option on the keyboard to scale to or from the center so we'll scale it so that it covers the corners and in fact we don't actually need to hold shift because over here in the property inspector you can see that the lock aspect ratio icon is selected and what I actually need to do is deselect this so you can see it becomes unlinked and now I can skew this out of shape so I kind of need to skew this to match me perspective of a laptop ideally I would distort this by bringing the bottom sides in as well but we don't have that feature in XD yet but this is good enough so there we go we've covered all of the screen I'm going to zoom in even more now and just hide the photo layer select the pen tool and now we need to define the screen so I'm gonna do this really quickly but please take a little bit more time and care with yours there we go that's the screen and I'm just going to give this a color it doesn't matter what color you choose because we will be using this as a mask in a moment and I could go name this mask if I wanted to know M Casper's try again no there we go mask fantastic I can type okay so now I've made my mask I can actually show my image again hold shift and select both the mask and the image layer on Mac OS go up to object down to mask with shape if you're on a PC just right click anywhere on the artboard and then you should get the same option mask with shape there we go now I'm going to change this from mask group one we'll just call this BG - image and it's important this group name or this mask group matches between artboards because that's what we will be using to auto animate so I have this image here what I'm gonna do is select this go to edit and copy or if you're on Windows right click and select copy that way which I'm back over here and we're going to edit and paste make sure we drag this to the very bottom so we don't hide our text and we're going to size this up now we can do this from the center holding alt or option and you may wish to drag that original image that you use in for reference because we have distorted this and we don't want we don't want her little dude here to be to be distorted out of shape sometimes you can get away with it if it's a landscape but if it's a person in their face or their body is all smushed then probably not so I'm just gonna guess this but you can take a bit more time and care with yours there we go something like that looks about right and the text I'm gonna change this to white there we go fantastic so we have a full screen image shrinks down to the laptop and what I like to do with Auto animating something like this it's a bit more complex is Auto animate as I go I would rather do that as I go check it all works rather than do something incredibly complicated realize it doesn't work and then have to try and troubleshoot why it's not working so with that said let's go over to prototype mode and we'll set up our animations so I'm gonna click on this artboard here now normally I would use the tap or the click of a mouse as my trigger however when we arrive at this second artboard here we want to have two options to be able to go back or to go forward so what I'm going to do is actually drag this to the second artboard and I'm going to use a keys and game pad trigger and I'm gonna click here to assign a key and that key is going to be the down arrow key on my keyboard I'm gonna set this as not to animate you can choose your easing I like ease in outs always a good one and the duration is half a second once I've set that up I can simply click on the second artboard make it to the third and again assign that down arrow key now what we're gonna do is go all the way back so start with the third artboard drag it up and assign the up arrow key and then click on the second artboard go back to the first and again assign the up arrow key so we start here we go down down up up so using the arrow keys enables us to go backwards and forwards from the same artboard so let's just play this so down down up up and you can see that image shrinking to fit the screen nicely now we've got a few more things we need to do so let's just close that down design okay good everything's working it's always a good start when you're doing a tutorial so what I'm going to do is select the laptop and have the background image here as well so I could select both of those layers by holding command or ctrl and clicking on them we're going to copy those and then paste these to the third artboard and I'm actually going to move this up here and again we can just check that this works by playing this so using the up and down arrow keys I could move the laptop around fantastic so we've got all the main components working now it's just a case of really finessing this and just having text slide in and out with everything else so what I'm actually going to do is have the Mac OS macarena text I'm just going to copy that and go and paste this on this second artboard and just drag this up here now you can see that this moves on to the pasteboard which isn't very good usually when you ought to animate to artboards together it will keep things on the artboard but if it does that for any reason just drag it to the very edge of your artboard as far as you can go and then what we could do is change the opacity to zero so I can check how this looks here so you can see that text it fades up but seems to transition into the other text and then what I can do is take this text here so power is power Mac OS Macarena copy these three bits of text and just paste these onto here and then maybe have these come up from the bottom so we'll bring the opacity down on those let's see how this looks not too bad something that isn't working for me and that is looking a little bit janky is how the Mac OS macarena layers are trying to merge to each other but they're not they're looking a bit strange this is what happens when you ought to animate with layers that are the same so I'm changing font size and everything and it's just it's looking a bit weird so what I'm gonna do one way of getting around this is we'll just delete all of those Auto animes that we just did I'm gonna select both of these right click and select group and I'll just call this text - one text - one my typing is terrible and I'll select these ones here group them together and call these text - - now because these are both in their own groups the fact that we have two Mac OS and two macarena layers is irrelevant because it will halts I animate the group instead so let's try this we can copy mac OS mac arena on to the next layer drag it outside there we go so you can see now as I drag it outside it still stays on that second artboard so if you do have any trouble before either go to the edge of the artboard or group things together and then you can drag them outside so I don't need to adjust the opacity I'm gonna drag this all the way out here we'll select this group here and bring that down here now let's have a look how this animates ooh much smoother and like that fantastic okay so I'm gonna grab the laptop I'm gonna move this down as well oops a little bit too far that's why I've spaced these artboards apart just because if something touches the other artboard it can move it from one artboard to the other and we don't want that we'll just make sure that that is at the back check how this looks there we go so you can see we're making lots of small subtle changes but when you put it all together it really does make for a much better end result so we have our laptop here we want this text to slide up along with our laptop so we'll move this up here and then this text in this call-to-action at the bottom I'm gonna group this together we'll just call that folder CTA I'll copy this paste it on the second artboard and drag it down so with the auto animate it's going to start here but then when it transitions to this artboard it's going to move up and then if we have a look now what it looks like all put together I can use the down arrow key to go down let's go down to get up and then back up to the beginning and as I say this is why I use the arrow keys rather than a tap or a click as the trigger because now I can go from that second artboard I can just keep going up and down or up and down like this and one thing I have just noticed is that when we go from here the image isn't actually shrinking so as I say this is why I like to do things one step at a time with also animate just in case something does go wrong let's try and find out why that isn't working so we have our background image we have our background image and this seems to be the issue you can see over here we've got two b:g images so what I could have done differently is named the layers slightly differently but I think in this case it probably easier to remove that instance of the laptop and the image or perhaps actually just remove the image and have the laptop come in let's see how that looks so if you try not to animate and you have two layers or groups that have the same name it will just default to a fade transition that's always a good indicator that something's gone slightly wrong there we go so the laptop slides in really subtly and the image transitions to the screen and there we go so that's how to create a rather lovely full-page animation all in Adobe XD so guys I really hope you enjoyed this tutorial if you do have any questions or comments you know what to do drop those down below but as always like this video if you enjoyed it take care and I'll see you next time [Music]

Channel: Dansky

Views: 83,215

Keywords:

Id: xeTiXwsS3AU

Length: 14min 38sec (878 seconds)

Published: Tue Jan 07 2020