Parallax Scrolling in Adobe XD

parallax scrolling is a common web design technique that can help to make long websites more engaging and immersive it first became a trend around 2011 but since then it turned into an established and popular format join me if you wish to learn how to build this type of effect into your adobe xd prototypes without worrying about css animations or writing a single line of code [Music] here we are in adobe xd and on my screen you can see the seven artboards that were necessary to create the prototype that you've seen in the intro so the goal of this project is to create a single scrolling site prototype that can demonstrate this parallax scrolling effects together with the sticky menu for navigation something that can simulate how anchor links would work on the final site if you want to test out and play around with the final prototype that i'm going to create in this video you can just click on the link in the description below but without any further delay let's get started and as you can see i always like to start with the final static version of that single scrolling page that i can then duplicate and start adding all the necessary movements and changes for the parallax scrolling effect unfortunately currently in adobe xd creating these parallax effects is only possible by creating these duplicate artboards but in the future they might add some features that will make this workflow easier but for now as i said we will have to create duplicate artboards but first let me just show you this website so if i just show you the preview for it let's command the control enter to quickly get to the preview this already has some elements that work so these are simple toggles that i added on these and they are set up as components with separate states and then if i scroll down we also have some components further down here that we can already interact with but as you can see at the moment this is just a simple scrolling page one thing i made sure already is that the menu always stays on the top and that is a very simple feature that you can find in xd just make sure you select that group or element which is your menu and then here in the options just choose fixed position when scrolling so if i take that off and i test it again then the menu will go out of the screen which obviously in this case we don't want so we will just turn that back on however this option won't be really necessary for the way that we will be setting up our multiple artboards for which what's much more important is to make sure that this menu is set up as a component so at the moment it's just a simple group i can check here in the layers it is just a group so what i'm going to do is to press command or control k to turn it into a component so this is going to be necessary once we have multiple artboards but we still want to make sure that the interactions that we assign to each of these menu items will be applied throughout all of our artboards but we will come back to that later for now just remember anything that you need as a component so all interactive elements like buttons menus icons should first be created as components and then the second and most important thing you will have to do before you get started duplicating your artboard is to select everything on this artboard and then group them together so that's command or control g so this is going to actually make selecting things a little bit trickier because you will have to always double click to go into the group and then move things around but this is necessary for the parallax scroll animation without everything grouped together in the beginning you will have a lot of problems later on so remember to do this at the very beginning but now we are ready to start with the intro animations that we would like to add to the site so this is not yet the parallax scrolling this is just the animations on the first fold so for this i am going to already duplicate the artboard so i use the selection tool and in design mode i just hold down alt or option key and drag it to the right make sure that you have enough space to the right of your original artboard because you will be adding quite a lot of these depending on how complex your site is and also i like to keep fair amount of gap between the two artboards because there might be some elements overlapping and it can be a bit confusing to work with so sometimes i would even make that space bigger and later on maybe move them closer just to tidy things up so first of all i would like to have a nice animation on the background element this nice curve that we have here so i don't actually need this character or the text or even the menu and i'm actually going to even delete these so i just select them and delete them so we only have that shape there and what i'm going to do with it is to really enlarge it so i'm going to make it bigger and then by double clicking on it again i can access the anchor points inside it and i can even move those around so what i want to create here is a nice animation when this curve is going to get adjusted so i make sure that it covers the whole screen and you can see that on this artboard we already have the viewport height set to 800 so that is that dashed line indicated here and what that means is whenever i test this out the window will only show that area now currently we can't see any animation we can just see how this nice soft gradient is going to look like but once we switch to the prototype mode and select the whole artboard that's quite important so you don't want to assign the animation on individual elements you want to make sure that the whole artboard is selected and then drag this little arrow onto the duplicate artboard there we can choose what we want the animation to be assigned to so in this case i actually set it to time and i make sure that the delay is set to zero second this means that it will automatically be triggered straight away as soon as we test out this as a prototype and instead of transition i want this to be auto animated because i would like to see that cool animation that will be created on the shape how it morphs from one state to another and to make the animation even smoother i am going to add ease in and out and maybe increase the duration to 0.8 seconds so now let's test this out we can already see how it is animated if it happens too fast what you can do is to come back select that little arrow there and change the delay to maybe 0.4 seconds so this way we have a little bit more of that background visible before it animates and if you quickly want to replay the animation just press the same shortcut again command or control enter and yeah i'm happy with the way this looks and if you want to delay elements in this intro animation what you can do is to already have another artboard set up so what i'm going to do is to duplicate this once again alt our option drag and then once again delete the things that i don't want to reveal yet and we need to double click and then delete things i'm going to delete the character and the tagline and maybe just animate these little details here so i'm going to move this text to the left also this one to the left and then this one further out you can see already i'm creating a little bit of a pattern here so whatever i would like to appear first is closest to the edge of the artboard and then the things i move further out will come in slightly later so it's a way to delay them and then this one here we can just move down let's just move it down there and then i'm going to select all of these and even reduce their opacity to zero percent and then on the next screen we will see them appearing but we have to also make sure that there is an interaction between these two artboards so similarly to before i use the prototype mode and i am going to use still the time option here i'm going to set this to zero second and the rest of the properties for the action should be the same as before so i don't have to reset them so let's just test this out again i go back all the way to the beginning so the first artboard use the shortcut to test it out and we can see already how all the elements on the left came in one by one and had a little animation on them while all the other elements here that we deleted just simply appeared the reason for that is because of course between the two artboards there were no instances on the first one so the only thing adobe xd could do there is to simply fade them in and make them appear while for these elements here on the bottom it had a before and after stage and it could create a nice auto animate action between the two states or if we are thinking in animation terms we can even call these key frames so let's test this again the two stages of our animation are ready but let's not stop there let's add one more artboard still for this intro animation so i'm going to duplicate this further and this time instead of deleting anything i'm going to come here select the menu by double clicking on it drag it up and select the character drag it to the right and then select this text and maybe switching back to design mode i can even rotate it holding down the shift key make sure that it's exactly 90 degrees move it somewhere here and maybe only for this text i'm going to reduce the opacity down to zero percent i didn't have to do that for the other two elements because they are already outside of the screen and now if we switch back to prototype we can select the whole artboard drag it onto the other one still using time the delay set to zero second but this time instead i am going to use the snap easing and maybe set the duration to one second so once again now we have four artboards let's go back to the first one and preview it so you could see that there was a little bit of swing back and forth both on the tagline and the menu and the character and that is thanks to that snap animation that we used here so once again let's test this out there you go very subtle very nice and of course we still have our toggle animations here and we can still continue scrolling down but now that we have this beautiful build up created for the first fold of the site we can continue concentrating on the rest of the site and adding all of those parallax scrolling effects and by the way if you want to find out how to get started with a project like this in adobe xd and follow me step by step through the whole workflow you should check out our latest graphic design starter boot camp i am excited to launch my 12 week long graphic design starter boot camp a unique self-paced online training program for beginners instead of overwhelming you with hundreds of hours of video lessons you will only need to dedicate a few hours each week to study most courses concentrate on a single application or tool while in this bootcamp you will learn to work with adobe photoshop illustrator indesign and xd simultaneously completing the creative projects each week will significantly improve your understanding of everything you learn you are also encouraged to share your final designs with fellow students in our private starter community and even showcase them in your creative portfolio click on the link above to find out more about the bootcamp and how to get started but now let's jump back to the tutorial so we are back in xd and i'm going to duplicate this artboard and i'm going to rename it and call it parallax 1. this way i will know that this is where the scrolling starts so the first and most important thing we have to do is to have this whole group shifted up and make sure that it's roughly aligned here where our next fold is so this is going to be the section about setting your goals i'm going to make sure that our menu is going to stay here on the top so i'll drag that down and that all of these other elements that we don't want to see are out of the screen so i'll just drag these down not the shape and then we can concentrate on the elements in our viewport so still remember that dash line shows the viewport and now we can start moving things around and even scaling elements up and down so if i just select this item here i can make it bigger move it a bit to the right then let's move this text frame down and i always try to avoid creating tangents or kissing between the elements and that basically just means that you want to avoid placing them in a way where it is hard to see what's in front and what's behind so when it's perfectly aligned here the pole and the edge of the text frame it feels weird so we want to make sure that it has a little bit more overlap than that same thing with this element i wouldn't place it here again feels awkward you want to make sure that there's at least a little bit more overlap between them now if we come back to the prototype option and select the previous artboard we can add the interaction and i'm going to keep it on tap auto animate easiness out with the same settings as before so we can just test this and if i tap anywhere on the screen we will already see the animation if i want to test it again just press command or control enter and let's see it looks good but it's not that interesting at this point so what i'm going to do is to select this shape here on the previous artboard and since it's outside of the viewport we can play around with it in the design mode so for instance i can stretch it all the way out and then i can double tap to select individual anchor points and i can make a completely different shape curving it in this way and then maybe even this point here can come up so almost filling in that area then the set your ghost text can maybe move to the left i'm holding down the shift key while dragging it and then this shape can go down the text can come up and this illustration can go to the right notice how i'm moving everything in different directions because that will make the parallax animation more interesting so let's test this out i'm going to select this artboard since i don't want to see the whole intro animation right now i'm just focusing on this first parallax detail and yeah that looks much better already let's test it again i like this it's quite nice both the shape as it animates and all the other elements and at this point it's worth mentioning that if you are presenting to a client and you want to really show them the parallax animation and concentrate on how things are transitioning from one fold to the other there's a cool way to making that a little bit easier for you so instead of using the tap trigger you can switch to drag which means when you are testing this out you can just start dragging from right to left to see the transition and with this you can control the speed and you can even go back and forth so as long as you are holding down and keep dragging you can really concentrate on all the elements and how they are moving but remember once you let go it's gonna stay with the last artboard so to be able to go back you will still have to just press command the control enter for a quick demonstration it's always easier to set up the tab but if you want to slow things down and really focus on every detail then remember to use the drag trigger instead but for this example i'm going to switch back to tap and then let's continue by creating yet another duplicate of this artboard so i'm going to hold down alt or option key drag this to the right zoom out a bit select the whole group drag it up until the next fold is in our viewport again make sure the sticky menu stays where it's supposed to be and that all these other elements don't reveal themselves in the viewport just yet and just like before what i'm going to do here is to start playing around with these elements in the design mode so let's just make this shape bigger again double tap on it change its curvature as well and again similar to avoiding tangents i also like to avoid having like a sharp line around the neck of characters it just feels a little bit strange once again putting it somewhere here feels much more pleasant and then we can even move these details around if we don't like the placement we can have the text here on the right maybe slightly higher as well and then this character can be bigger and then we just have to go back to prototype mode connect the two artboards using the same interaction settings as before ease in and out so if we test this out from the previous fold this is what we see on the next one and usually once i have everything set up on the new artboard i come back and refine where things are coming from so aim high can come from the right this text can come from below the character can come from above and maybe with a bit of transition or fade and then that shape can come from the left so let's test this out again click and then we can see how it works once more yeah it looks quite nice now maybe the character's transition is not the best so i'm actually going to come back here increase the opacity just drag her down let's test it this way yeah that's better i didn't want to create that blending between the background and the character so now that's fixed and it looks already much better now from this point on i'm going to speed things up because i'm just going to repeat the same steps as before to add all the parallax animations for the rest of the folds in the page and we will jump ahead and concentrate on setting up the navigation for our sticky menu [Music] so now we have everything in place four artboards for the intro and four artboards for the parallax scroll let's just see how it works so there's our intro animation works nicely if i tap anywhere we scroll down tap anywhere again scroll down keep scrolling and then we arrive to the last fold so now it's time to set up the sticky menu and the navigation because of course currently the way this prototype is set up we can't just scroll up and down because of course on these folds or these artboards we don't have any more detail to show so it's completely hidden away from the viewport that's why it's important to include a sticky menu for these type of website prototypes now since we set up our sticky menu as a component i'm going to come to this instance of it and i can tell from the top left corner that this is actually not the main component it's just an instance of it or a child of the original so if we want to make sure that the interactions will be assigned on all of the artboards it's always worth choosing the edit main component option now since we hid or deleted that one it will have to be generated separately outside of one of our artboards but from this we can now double click and select goals and in the prototype mode we can drag it onto that artboard using the same auto animate tab with the ease in and out and one second i think is going to work then let's select sharing that will have to go on the last artboard and i'm just going to move this here in the middle just so it's easier to select all of the elements the boost needs to go into that one and aim high needs to go here and then finally we want the i growth which is the name of this product to go back to the page or artboard where we have all the elements already in place so we don't want to keep replaying the intro animation we see that once but after that we want to come back to the first fold where already everything is in place so now that we set this up we can just come to any of these pages and test things out so let's just jump to boost then go back to aim high and you can see i'm intentionally going in a non-linear way just so we can see that all the linking is going to work sharing then jump back to ghouls then jump maybe again to aim high and then go back to the first fold thanks to our component everything works as expected and we didn't have to repeat all of these interactions for each of the duplicate art boards working and utilizing components in adobe xd is extremely important so if you haven't started using them make sure you do so because it will really speed up your workflow and make it work more efficiently and if you enjoyed this tutorial and you want to learn how i also created the app version of this project and how i built everything from scratch all the elements then remember you can learn that from our graphic design starter boot camp for which once again the link is in the description below thanks a lot for watching like and share this video if you enjoyed it don't forget to subscribe and hit the bell icon to get notified whenever we release new videos click on the link on my right and start your membership today to get access to over 200 hours of training courses and personal mentoring by me and my team of creative professionals have fun learning guys and i will see you in the next one [Music]

Channel: Yes I'm a Designer

Views: 124,780

Keywords: Parallax Scrolling in Adobe XD, adobe xd, adobe xd tutorial, adobe xd animation tutorial, ui, how to animate in adobe xd, autoanimate in adobe xd, motion design in adobe xd, adobe xd webdesign tutorial, auto animate tips & tricks, parallax in adobe xd, adobe xd web design animation, xd tutorial, parallax animation, web design parallax, parallax design tips, how to do parallax, website parallax, web design, ux design, ui design, app design, digital design, graphic design

Id: oQB03UvcMDI

Length: 23min 7sec (1387 seconds)

Published: Mon Oct 04 2021