Hi everyone, we're going to look at a different transition. It's this one. Watch this, I can click hold and drag. It's a drag transition. Great on mobile phones, you can kind of swipe left, swipe left. It has a few bugs. I'm not gonna lie to you, but we'll work through those. We'll also show you how to use that exact same one for this slider. Look, we can drag that and it changes shape and does cool stuff. All right, let's jump in now and learn the drag transition and adobe XD. Alright, get going with this one. We're going to create a few little pieces to make it work. I'm going to speed this up and I'll show you the finished results. All right. So what I've done is I've just created a few tiles or cards that I want to kind of swipe through. Okay, the trick is with it, you need to make sure they're all grouped in one big long line. Otherwise this ends up coming off the outboard if that's not kind of grouped to something on the outboard and it can't be part of the animation. Cool. So we...
're going to have two of these. Okay, and this one here is going to move to the center on this one and basically we're going to do an auto animate using drag though, because if we just use the regular what we've done in the past. Right, as we did this. We connected it up. We did tap and we did auto animate that kind of works. Give it a preview, give it a click and moves across. We just want to be activated by a different thing, That different thing instead of tap, it's going to be drag, still going to order animate. Okay, give it a preview and click hold and drag. Pretty cool. Huh? Now the trouble is, is going to be trouble. Okay. Um, it's it's pretty basic at the moment. Hopefully you you're in the future and you're looking at a you can drag more than one way. Look, I can't drag back, kind of not useless but kind of useless. It's a good first start, let's say because we can keep going to the right, that's easy. So I can say you when you're finished, you can do the exact same thing, drag on to animate. Great. Let's give it a go. You drag it's cool, drag this one. It's not working. Let's double check. Well, we didn't move it mm hmm. So I did it and it was dragging but it wasn't going anywhere pretend that was. I did that on purpose. Okay, So dragging across and dragging this one across, but try and get it back. You can't do it, you can't drag to the left or up or down. Okay? It's just drag right. So we're gonna keep this video short because you can't do lots of things, you can try and mess around with it, you're like, okay, so I'm gonna drag back to the this one here, look that works down. So drag or to animate you, It will work. Let's give it a go? But you can still use left the dragon to the right. So you, you and then the next one I want to go back this way, but you can't, but you can drag it this way and go back to the middle. It's like inception or when somebody like has this scroll wheel around the wrong way up is down, down is up. So we're gonna cut, drag down. It's cool. You can swipe, it works on a mobile phone for the testing so people can swipe across. I'd be reluctant to use it at the moment because the first thing they do after they swipe across and they're gonna try and swipe back and they can't but another use for this and it's quite cool. Let's jump in and I'll show, I'll show you that little slider, adjust the thing. Okay, let's go and make it. I'm going to add it to this video because it's all about the drag and transition and this one's kind of cool. I've found a good use for it except for this example that I showed at the beginning, but you might be working on something that yeah, it was really useful for it. So I'm gonna switch back to design view. I'm going to duplicate the page. I am going to been all of this. Don't need any of that, Make sure. Do you have any transitions on this one? Nothing at the moment awesome. So we're going to build our little parts. So I am going to switch back to design view. Let's go the rectangle tool and we're going to do two things. I'm going to grab that circle at the top here. Let's fill it with our green. Get rid of the border. Let's create slider. Now the silence is just totally fake. Right? Doesn't exist. It's just a thing that looks like a slider. So that's the slide bit. That is the circle Draghi bit, give it a color. So that's the kind of main parts you want. So we want now an identical one and what we want to do is change this. Okay. We'll just change the size to start with. And now what we can do is instead of doing it for the dragging the whole entire like cardboard, you can click on this, go to prototype mode and this can be the dragon ball items. So this is going to control dragging to this. It's going to drag, it's going to order animate remembered from last time and did the same thing with this guy grab the error of him. He goes back and actually he needs to be further along in this little bit. Okay, so that's, it went a bit fast. It's not very hard. Let's give it a go and check this out. Mhm Yeah, I have no use, I haven't found a use for it yet. You might, so there's, I just want to go if you decide to go down that rabbit hole, I will show you a couple little things you might run into problems with. Is this changes size? Perfect. Okay, mainly because in my layers panel um we looked at this before, it's a primitive rectangle and so is that they have the same name and they've got the same little icon there, let's say over here, I wanna make this like a rounded circle. It looks like an ellipse. But it's not it's actually a rectangle. Okay, that has such rounded corners that it looks like a circle. But over here it still says I'm a circle. Look, I'm still a circle, so that'll work. Okay, so that's something you can do circle square. But let's say that I go into this and I actually want to start messing with it, make it that kind of like muni thing or use my sweet new kind of design skills. I don't know what we're making, but let's have a look at this now, if I preview it, preview the right page, even if I drag this, it doesn't know what to do because like because it's not connected anymore. Okay, they're not the same kind of shape that got converted to a path. Okay, and that's the rectangle the way around that have a think about it. What would you do, pause it, have a think and maybe go and do your own version but you can work it out if you can't remember. It's turning this into a path. Okay, so um there's a shortcut I use all the time. It's command eight or control eight on a pc and it just turns it to a path. Now. The problem is they have different names, I'm going to call this one, I'm just going to copy it. Copycats are the same now and they're both paths now. We should be able to preview this fella and go. So it needs a bit of work the transition especially because the, where I want to use it the most is kind of swiping on a mobile phone through say images or a gallery. But it works kind of cool with this little slide back here, maybe adjusting the size of something at the moment. It doesn't adjust color. You're like, oh, just the color. Okay, I feel like I should give it a go. Just kind of flicks between the two. Just kind of jumps. Maybe that will adjust in the future as well. Give it a try while you're there. Might be working because it would be really handy with it for a hue slider. That is something I could work into a project. All right, that is the drag transition in adobe XDD