2.5 Using Touch Down and Touch Up for Advanced Animations

Welcome to lesson number 5, where you'll learn how to work with two advanced triggers, touch down and touch up, so let's check them out. I've loaded another artboard from the demo XD document I showed you previously, and I'm gonna demonstrate these these two triggers with one of these chat bubbles here. So, it works something like this, you select the the chat bubble, you add a trigger, and you select touchdown, and by the way, if at any point, you don't know what these are doing, you have a little question mark right here, you can click it, and that's gonna open up that link in a browser window. Exactly to that trigger, and it explains everything it needs to right here so back to ProtoPie, I'm gonna select Touchdown, and now, I can start altering this element, or some of the other elements. Let's add a scale to this, by a factor of, let's say 150 and for easing, let's do spring, and let's see what we got, I can click, and I can see the effect happening, but it kind of stays that way. So let's add another trigger to it, touch up, and I'm basically gonna reset it, and I'm also gonna choose Spring here so it goes something like this. See, but this doesn't work on a click or a tap, you must hold it see that? So you click hold, then it does its animation and once you let go of the click, then it bounces back, and that's what touchdown and touch up, are doing. You basically get the touchdown trigger when you click and hold, and then touch up when you release the click, and that's cool. So what can we do with this? How is it useful? Well, we can use this function to highlight This specific chat bubble. So I did one thing to it, I made it bigger, but I think that's a little bit too big, so let's scale this down to 125, and what else can I do? I can move it, So I can say, add a response of movement, and let's move it minus 30 pixels. That's a little bit better, but I think we can go even further, maybe like 45 Maybe 55 even. All right, so that's pretty cool let's also do a nice easing here, so also use Spring Nice. And since we're making this bigger to make it more obvious, let's select the other bubbles, make them smaller and change their opacity. So, I can do this, on touchdown, I can select this and I can change its capacity to maybe 50% Let's do a linear easing, and let's also scale it down to maybe like 80% and let's do a Spring here as well. So it looks something like this, And now, we can go in here and reset it, and let's also use a Spring here as well, so now it's a It looks like this. And then we can go and do the same thing for the rest of the bubbles, I'm just gonna do one more because you get the idea so add a scale Scaled, sorry, factor. I think it was 80% Spring, let's also change its capacity to 50% linear and let's also Reset it here, what is spring action? Preview, So we're scaling this to 80%, my mistake there, and opacity to 50% okay. And then, here we reset it, I think I got the, the wrong element here, let's redo that reset and select Spring. So now Perfect. And then you can go on and do the same thing with the rest of the elements. And that's how you can create animations with the touchdown and touch up triggers a little bit more advanced, but you can create some very cool stuff with it. Now for the final lesson in this course, you'll learn how to test, and also share your prototypes with other people, so I'll see you there.