Adobe XD Website Animation
Articles,  Blog

Adobe XD Website Animation


Hello everyone will come back I am your host Elias sarantopoulos in this Adobe XD tutorial we will explore how to animate website hero images using micro-interactions and time triggers to capture a user’s attention, we will use the repeat grid feature to create repeating elements, link artboards and use the auto-animate action to transition in between. All that inside Adobe XD! Inside Adobe XD I have already brought in the Photoshop file which is included in the exercise folder below the YouTube video description or up in the YouTube card if you wish to follow along since there is a lot to cover. But quickly let’s go ahead and jump into Photoshop and take a look at this file which consists of four artboards and each artboard represents one slide so we have the first slide, the second slide, the third slide, and the fourth
slide. OK so back in Adobe XD all you have to do is click on the Home icon here and then just find the file from your computer. So I’m going to marquee select those three artboards, just going to move them out of the way a bit here and just focus on the first slide and talk about how we can accomplish this inside Adobe XD. For us to create a hero section with multiple slides inside Adobe XD is to use the Repeat Grid feature. Now the Repeat Grid feature changes a group of elements to a repeating element, in this case the repeating elements include the photo, the heading, the subheading, the description text for its slide, and the pagination which
provides additional navigation options for browsing through single parts of a given slide, in this case we’re using numbers one out of four (01/04), two out of four (02/04) and
so on. OK another thing that I would like to mention which is a very important point, that is each slide rests in this position so every other
slide that comes in will also rest in the same position which means we are going to measure that distance, the distance between the Heading let’s say and the far left side of the website hero section. So inside Adobe XD all you have to do is just click on this Heading here and then hold down the Alt key or the Option key and now you get all these numbers in this case we care about this number here which is 345 pixels,
that’s the distance between the Heading and the far left side of the website hero section
so we definitely want to keep this number in mind which will come handy very soon after. So let’s talk about which elements are we
going to repeat and not repeat. Well we’re definitely not going to repeat
the Burger menu so I’ve locked this layer as well as the background color. We’re also not going to repeat the left arrow
or the right arrow so go ahead and lock those layers too but we’re going to repeat the rest
of the elements so I’m going to marquee select everything, OK, I’m going to zoom out here
and then we’re going to use the Repeat Grid function here which is right here in the Property Inspector. So if you want to use the Repeat Grid all
you have to do is just click on that or you can use the keyboard shortcut which is CTRL + R (Win) / Cmd + R (Mac). So go ahead and click on that and then we’re going to repeat this three more times since we already have the first slide. So I’m just going to bring this out here and I’m going to zoom in because I want to do a good job here, I’m going to bring this in
like so. OK, so let’s see there we go. Alright, that is the first thing, the second thing is, we talked about before the resting of position of this slide, if you remember
we measured the distance to be 345 pixels so we need to adjust the padding between those two elements. In the Repeat Grid so to adjust the space
between two elements on the grid all you have to do is hover over the gap between elements, there we go and you see that the cursor changes to double arrows. So all we have to do inside Adobe XD is to
drag to increase or decrease the padding, in this case I’m going to drag this to the
right to increase this by 345 pixels, like so. OK, very important point here. All right, so now we’re going to Ungroup the
Grid and then I’m just going to focus on each of these slides. So here’s the Group 26, right-click and ungroup this because we need to change the information inside here. All right so I’m just going to double click
on that, CTRL + C (Win) / Cmd + C (Mac), and then double click on this and paste it CTRL + V (Win) / Cmd + V (Mac). I will do the same for the subheading, there we go and also for the description text, paste that as well let’s not forget the Pagination
here it will be 02/04 and then lastly we have to replace the photo. So in order to replace an image inside a grid we’re going to open the File Explorer, there we go and these are the photos that’s I’m
going to be using which I’m including again in the exercise folder. So first we’re going to target which photo we want to replace, in this case we want to replace this folder but we also have this
for Photo BG on top of it so first I’m going to make this layer invisible, I am going to
hide it so this is the photo we’re going to replace and then all I have to do is just
click and drag this and bring it just right on top on the other photo to replace it and
then in the Photo BG layer I’m just going to make this visible again, there we go. And let’s see I’m good marquee select everything and then right click and Group this. OK, so go ahead and repeat the same process and replace the remaining elements for the rest of the website Hero section for the remaining multiple slides. And so inside Adobe XD let’s go ahead and
create a first micro-interaction which is transitioning from one slide to another using the Auto-Animate action. So first I’m going to marquee select these
artboards, I’m just going to delete them because I’m not going to use them and then I’m going to marquee select the first artboard, the first slide and group those elements so CTRL + G (Win) / Cmd + G (Mac), and then I am left with a group and all these locked items, the
layers, the left arrow, the right arrow, the Burger menu and the BG, this is exactly what I wanted to have. So the micro-interaction will take place between two artboards so we need to create another duplicate of this so, click on that and then
hold down the Alt key to create now duplicate and just bring this down. Double click here and rename this let’s say,
Final like so. OK, so inside Adobe XD when we wire to artboards using the auto-animate action, Adobe XD will animate difference in properties between each artboard, this could be an Opacity, Color, the text size and Position of an object. Now you have to keep in mind and all the name of the layers have to be exactly the same! So in this case we will auto-animate the difference in the position property so what I mean by that is I’m going to just double click here
and marquee select those and just hold down the Shift key and just bring those to the
left a bit, like so. We’re going to animate the position between this artboard to this artboard, OK, so for that we need to jump into the Prototype mode and then we’re going to click on the object we want to link, in this case this this artboard will link to the next artboard. Now when we do that this an arrow appears right next to the object, when you hover over your mouse over the handle a cursor changes to a connector. Click and start dragging your mouse to see the connector there we go and then just wire this up to the next artboard. OK, this is going to be a time-based trigger,
it’s not going to be a Tap, it’s going to be time based, no need for delays, the Action will be the instead of Rransition the auto-animate, Destination the 1st Slide Final, Easing will be Ease-In for me and then Duration one second (1s) is fine as well. So let’s go ahead and make sure that you click on this slide, going to click on the Desktop Preview and let’s go ahead and run this preview here, there we go. Exactly what I wanted, I wanted to have difference in properties, in the Position properties between each slide, each artboard, in this
case using the auto-animate like so. So now let’s go ahead and work on creating
more micro-interactions inside Adobe XD. So for that I’m just going to select this
artboard and just bring it right next to the other one. like so, and then I’m going to create another duplicate so I’m going to hold down the Alt key to create another duplicate, double click to rename this to 2nd Slide and the 2nd Slide will come in so click on that and then click
and drag, hold down the Shift key as you do to bring in the second slide, again I’m going
to zoom in here I’m going to use the left arrow key, I’m going to tap on that and make sure I place it exactly at the edge like so. OK, alright, now we’re going to create another duplicate of the 2nd Slide so hold down the Alt key, there you go, double-click, rename
this to 3nd Slide Final and again we’re going to have a position property animating so double click on that and hold on the Shift key as you move this to the left, like so. OK, so the micro-interaction between those
two artboards using the auto-animate will be just on the Position property so I’m just
going to wire this up right here, again the Trigger will be time-based, Action, auto-animate, and the rest stays the same. Now how about if the user wants to actually click on the previous slide and wants to go to the previous slide, the 1st Slide? So for that we’re going to target the left arrow and we’re going to wire this up to the 1st Slide but this time the Trigger will be
on Tap, so Tap on click, the Action will be auto-animate, and the rest stays the same. We’ll do exactly the same thing on the end
of the 1st Slide, the user can click on this arrow here, the right arrow and we can go
to the next slide again. The trigger will be Tap, the Action will be
auto-animate, and the rest stays the same. So let’s go ahead and test that with the Desktop Preview, let’s go ahead and run this, here we go, this is the 1st Slide, it animates,
the Position property animates, we go to the 2nd Slide, again the Position animates, the
Position property animates and we can see here the Pagination numbers. Let’s go back to the 1st Slide, there we go
and everything works exactly the way it’s supposed to work so now all you have to do is repeat the same process, connecting artboards and slides together for the rest of the micro-interactions to take place. One last thing that I would like to mention
here is that when the user taps or clicks to go to the next slide as you can see the
navigation or the Burger menu is hidden so all we have to do is target this layer here,
this burger menu, and just bring this up on the layer stack, like so. And we do this for each of these artboards
and once you finish that then the slideshow will run perfect the way it’s supposed to run. So let’s do a quick preview here, let’s run
this, let’s go to the next slide and then the Burger menu or the navigation is not hidden. Thank you everyone for spending time with
me, let me know if you have any questions, and don’t forget to subscribe to my channel
to get the latest tutorial updates! Elias Sarantopoulos

3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *