Okay people, are you ready for your first bit of animation?

We've been kind of doing animation, right?

More transitions, we've been doing this...

the whole page kind of transitions over, now what we want to do...

that's the entire page, animation is individual objects, are you ready?

How do I get there?

Here we go, now are you ready?

Oh, look at that, that falls down...

the arrow moves across, fades in...

that is animation in Adobe XD, and you're me...

I'm going to do that right now, let's jump in.

All right, let's make that animation...

so let's look at this little arrow here, it's our Confirmation page...

the way this works is, you need to-- it's kind of weird...

it's not like normal animation, if you're from...

Adobe Flash days, or Adobe Animate, or After Effects...

or anything that has animation...

this is a non timeline animation...

we kind of duplicate artboards and connect them up...

if it seems weird, it's a little bit weird, a little bit clunky but it works.

So what we're going to do is...

on this first page I'm going to have this arrow...

mine's in two pieces, I'm going to have it over this side...

keep it on that board for the moment.

We'll do the basics in this video, and then in the next video...

we'll go a little bit more extreme...

or mainly show you the stuff that might catch you out.

So we're going to have this arrow on the side...

and we duplicate this Artboard...

you can select the name, you can right click it...

you can duplicate it, copy, paste...

I just use the 'Command Z', or 'Ctrl Z' on a PC, and 'V', copy, paste...

so we have two of them.

hyphen one, '-1', we should probably call it something better...

but hey, hyphen 1's working for me...

and what we need to do, where this works, there's a couple of...

like things that have to happen...

A, you need more than one Artboard...

and the other one is, the thing that you want to animate...

needs to be named the same on both sides...

and in our case I want mine grouped, because I don't want to animate...

the arrows separately from the stalky bit, that's up to you.

So I'm going to select both of them, holding 'Shift'...

and hit, well, hit, I'm going to hit 'Group'...

so you can right click it, or go 'Command G'...

'Ctrl G' on a PC, to group them...

and over here, this one's called Group 13...

and this one's called Polygon 1, and Path 1 or Path 2...

so that's not going to work, it looks for the name...

so that's how it does its magic.

I'm going to use something called Auto Animate...

and it won't work, without it...

so if I group these two, so again, group them over here...

one's called 13, and this one's called 14, so that's not going to work...

so let's call them both 13.

It's handier if you name them...

before you duplicate the Artboard, I guess...

but I want to show you the hard way, so you--

so you can do it the easy way later on.

So these are the same, something needs to be different...

I'm moving this one across, if you hold 'Shift' while you're dragging it...

it'll do it in a straight line, and now nothing's going to happen.

We need to add the animation, so let's click on the arrow...

let's switch to Prototype mode...

I don't want to get too hard into shortcuts...

but can you see, up here, if I hover above it...

on my Mac it's 'Option 1', 'Option 2', there's a lot of...

when you're doing stuff...

on a PC, it's 'Alt 1 and 'Alt 2'...

so 1, 2, 1, 2, 1, 2, 1, 2...

switching between Design and Prototype, or just click the button.

So Prototype, I'm going to say, you, go over here...

and the magic happens when-- by default it's on Transition...

that's what we did in the last videos...

we transitioned the whole page, it slid across, and we added Easing.

In this case we're going to go from Type to Auto Animate...

this just looks for the same name and fills in all the gaps for us.

So it looks for, was it group 13, looks for group 13...

and just tried to combine the two, so let's just preview it...

so let's click on the name 'Confirmation', and let's hit 'Play'...

and what I might do is, just, we're going to do this a few times.

So I'm going to leave this open permanently here...

so let's give it a tap...

look at that, we did it...

hey, first bit of animation, congratulations, you give it a go.

So yeah, there's animation, that's the basics, anyway...

I'll use my arrow keys to go back...

go down here, Purchase, click, moves across...

so it's kind of working, it's not what I want...

I want it to automatically go across.

So let's do that thing next, so at the moment..

we've got this, when it is tapped...

do this auto animate to this other page, called Confirmation-2...

it's not what I want, so what I'm going to do is...

break that link, either, remember, drag it kind of back off...

and this is the way I do it.

So what we're going to do is, the whole page instead of just the arrow...

because I want you to click that...

I want the whole page to go here...

it should remember the last thing you've done...

it's going to say, whole page, auto animate, when it's tapped...

and it'll work, let's go over here.

So let's click on this one, down to Checkout...

and when I click anywhere it moves across, still not quite right...

what I want to do on this page is...

I want it to auto animate, but I don't want it to tap...

I just want to say, after a certain amount of time...

and in my case, 0 seconds, so from this page to this page...

after 0 seconds, auto animate to this other page...

that makes sense, kinda?

All right, so check out...

you, click, oh, click...

hey, look at us, we did it, it auto animated.

So for the user - we go back a couple of arrows.

- they only see one arrow moving across...

the trouble is, it's not really trouble...

it's just the way that XD have decided to do it...

is that they have decided that every key frame is an actual Artboard...

and that's how you animate it.

So complex animation inside of XD is troublesome...

I've done animations where there can be...

10 or 20 of these Artboards, and it's not great...

there are other tools for doing animation for the web...

things like Adobe Animate is a good one...

but hey, we're at that Prototype place...

and also I should note that we're doing animation in here...

we shouldn't really be doing it, at wireframe...

but this is a course, and it's fun...

I wouldn't be doing animation at this stage just because...

it's not the time to be delighting customers...

these sorts of animations or micro interactions...

or little kind of success things, should happen later on...

the kind of final developments, it's the icing on the cake...

not the wireframe, but we need to learn these things for this course...

so moving arrow it is.

So we've done movement...

you can do lots of things, so you can decide...

that this is-- I'm going to switch back to Design mode...

I'm going to make that smaller...

well, that didn't work, because it's trying to kind of keep our Stroke size...

and line it all up and be fancy...

by default, we'll look at this again later on...

Responsive Resize, that is fancy...

it's trying to do some stuff that we don't want it to do right now.

So with this selected I'm going to say turn that off, thing...

so I'm going to say, you, there...

and it's going to be at the bigger size over here, let's give that a go.

Let's click on this 'Artboard' here, click on 'Purchase'...

it gets bigger and moves across...

you can do other things, you can decide on rotation...

I'm going to decide to do it, I don't know...

it's going to start 180 from where it is, it's going to flip around...

and let's have a little look...

oh, did you see it there, I missed it, you back one...

back one more...

you...

hey...

yeah, you get the idea, right? I don't like that.

Remember, to rotate things, you can type it in over here...

but if you hover just outside your little-- got my Selection tool...

hover just outside of here, you can do it kind of manually...

I'm going to turn mine off because that looked not desirable.

The other thing, so size, you can do, you can do rotation...

you can do opacity, so what I can't do is...

I can't delete it from here, if I delete it from this side...

hoping that it's gone from here, and it will appear over here...

and maybe magically fade in, it's not going to...

so, yep, let's go to Purchase...

and it kind of just appears...

it doesn't know what to do, it goes...

"I don't know where the original one is, I'm just going to fade in"...

that's the default.

So what we need to do is - undo that.

- is we don't delete it, we just turn the appearance...

this opacity here, turn it right down...

or as much as, or a little as you like, so it's going to start there...

and move over to this one, let's give that a go now.

Checkout, ready?

Fades in and moves across...

now we haven't played around with Easing...

so let's have a little look, Confirmation page...

is-- now switch to Prototype...

and it's going to ease in and out, well, it looks quite nice...

you can ease, maybe out, easing out is kind of like...

imagine adding some sticky glue to either the in or the out...

the out is this side, kind of the finished part of the animation...

and the ease in is the other side, so if I ease out...

if I click on this one and let's say, go here, watch it...

it's going to start fast, and then gluey, sticky out, ready?

It might be hard to see your easing...

because the duration is quite short, so let's go up to 1 second.

So let's-- oh, you saw it there, didn't you? You, you...

can you see, it kind of starts fast and goes slower at the end...

I'm hating my animation, by the way...

the size things, is kind of killing me.

So let's go to 'Design' and undo that size, where are you?

It's hard to see it, just kind of guessing at the size...

yeah, it looks nicer.

So have a play around with the easing on your own...

let's have a look, Prototype...

and let's have a look, ease out, have a play around with them...

you know what Bounce does, have a look at Snap and Wind Up.

Most of the time, if you're like unsure...

just to ease in and out, puts glue on both ends...

so it's kind of like slow at both ends, and it goes fast in the middle...

and often it looks really nice, so you, you...

that is often a nice kind of natural...

natural and a digital kind of sense movement.

So the rules for animation, you need at least two Artboards...

and on those Artboards you need something that changes...

that has the same name, you could-- let's do...

let's just do one little example.

So I've got two Artboards, this thing here is called Icon Twitter...

over here this one's called Icon Twitter, great...

so I'd have to change it if you've actually manually named things...

it kind of remembers it and goes...

"Oh, he probably wants to keep that name"...

whereas that was a random group or a random line...

it just duplicates it, you end up with group 10, 11, 12, those sorts of things.

So same name, that's the rule, two Artboards...

something between the two...

and in our case, let's do it bouncing down here...

so it's just going to move down, that's the only difference...

and are you ready for it?

We are going to both delight you, and bring up another problem...

that I unintentionally want to cover...

so Bounce, you ready?

Oh, look at that, can you see, you're like...

"Oh, that is good for that though"...

but the arrow's weird, can I do it separately? No.

It's kind of pretty rudimentary, as in...

the animation, all the whole Artboard has to do its thing...

so you can't apply separate bits of easing and animation...

to individual parts, mostly.

I'll show you, in the next video, we'll go a little bit more deep dive...

but two Artboards, they have to be named the same...

something different size, you can use color...

you can use rotation, you can use opacity...

and have to be named the same, have I said that, anyway...

that is it for this video, let's jump into the next one.