2.4 Creating and Editing Basic Animations

Welcome to lesson number 4 where you'll learn how to create some very simple animations in ProtoPie. So let's begin. In the previous lesson I already started showing you a little bit of this process when we added these transitions for the opacity of the elements on our first screen here. But let's go a little bit deeper and add some nicer animations. So what I'm gonna do is get rid of some of these elements, some of these responses. So right now we're starting with a clean slate. Now instead of just changing the capacity back and forth, let's add some more movement. So what I'm going to do is I'm gonna add a Move response. I'm gonna set its duration to 0. And I'm gonna select Move By x-200. So that means when my scene starts, I'm setting the capacity on these 4 elements to 0. And then I'm also moving this element to the left by 200 pixels. And this is what Move By is doing. It's basically getting the current position of the elements and it's subtracting, we're adding the values that you set to that position. If you set Move To, you must give it a precise set of coordinates. In my case I'm just gonna select Move By, and then just test this out. I'm also gonna add a reset. I'm gonna set a 0.2 duration, but on the easing, let's go to Spring. Because I think it adds a very nice effect, so, Here it is. Let's see that again. See, so it got positioned, it got moved here somewhere off my cameras. And then when reset is active, it just brings it back to its original position and this is what we get. Pretty cool. All right, so let's delete this for now. And let's add this Move command to the other elements. And actually what I'm gonna do is I'm gonna set the Move To -500. All right, so select this add Move, again 0 duration here, move by -500. We'll do the same here, Move, Move By, -500. By the way you can give the different values to these elements, its totally fine. 0 duration, and select this next button Move. Move By- 500. And then we'll select this again. We'll add a Reset, select this, add a Reset and do the same for the other 2 elements. Okay, so now I can grab these. And I can set the easing to Spring. And by the way, this easing also has these options, Tension and Friction. And you can play around with these to get the the easing effect to look differently. And also what I'm gonna do is set a delay starting with this, 0.1, 0.2, 0.3. All right, so let's see what we got. Save Preview. Well that's pretty cool, right? Let's look at it at 1x speed. That's nice. And you saw how easy it was. You just need to properly set your transitions and then your resetting the properties for those elements. What else can we do? Well, before the Reset, we can actually hit this little button and it's gonna insert a response in between these two. Let's do I don't know a rotation maybe. And we're gonna rotate by, let's say, 90 degrees. And now our first element is also gonna have a rotation. Let's check this at 0.5 so you can see the effect better. I don't think rotation works very well here. So if at some point you decide I don't really like this, you can delete it or you can deactivate it from here. And you can add another one, select, Let's add the scale. On the scale, you can scale by size. So you can give it a width and a height or you can scale by a factor. So let's say like 100%, or 50%, or whatever you want. Let's do this. Let's actually set this to 200%. Okay, so now we also have a scale effect added to it. Let's look 1x speed. That's pretty cool. Again if at some point you want to disable an effect, just select it from here. Uncheck that, And you're good to go. If you decide that you don't have enough delay, well you can select each reset and you can change its delay here. So let's say I want 0.2 on this, 0.4, 0.6. So now, You'll get a different delay. Now while we're doing these, notice that we still have that Tap trigger that we added in the very first lesson, and that still works. It still takes us to the other scene. Even though we've all of this animation on top of it. Now what about these controls over here? Because normally when you tap on them, yeah, it should slide this container here. How do you do that? Well, it's actually very simple. Let's zoom in here a little bit. Let's select this second one, which is called Ellipse 12, and trigger tap. And then under it we're gonna select, This element which is called card_surfing, and what are we gonna do? We're gonna move it. Let's say we're gonna move it to, and there's a little bit of math involved here. So we need to move it exactly in the middle. So we can see the position here is 24. But if we move it like in the middle, we can see the position is -41. So let's do that. Let's select Move, Move To x-41. And we can choose the easing, and since we like the Spring easing let's do that. So now, preview. Nice, right? Let's do the same for the other two dots. So when I click the first one, Add trigger, Tap, I select this bit and I set its position to 24 or I can just reset it. But let's do this. Let's set its position to Move, Move To 24 pixels. And let's also choose Spring. And when I do the third one, I want this element to be positioned at 24 pixels here. So that means that my x position is -106, okay? So this Add trigger, Tap. Then I select this Move, Move To -106 Spring. All right, so let's move this back into its original position. And by the way, you can hit alt, and you can hover over your scene to see these smart guides that tell you the distance between elements, which is very handy. So let's hit Preview. So that's working just fine. But what about the actual dots? When I click on one of these, it should change color, right? Well, you can do that if it was an editable element, but right now these are just images. So you cannot change their color. So to make this work, I would have to recreate these elements. So that's actually very easy to do. We can see that, This is actually an 8 by 8 circle. So let's go to Shape > Oval. We'll create one that's 8 by 8. And let's go back to XD and get the correct color codes for these. So this right here is just white, and these are black with 20% opacity. This, let's change the fill to white. And let's duplicate this, let's move it here. And let's sample this color, Over it again. And what we can do now is just go in, delete, The older ones. So now I've replaced those with my own shapes inside ProtoPie. So now notice that we don't have those layers anymore, so we don't have the proper actions. Let's rename these to Oval 1. This is Oval 2. And this is Oval 3. So now I can click on Tap, which currently doesn't have a layer that it's applied to and I can select Oval 1. Then I can click on this. And I can select Oval 2. And I can click on this and I can select Oval 3. So they should still be doing what they're supposed to. I wanna see does it work? It does not, or it does. You just need to, Hit these in the right spot I guess. Okay, we have a little mismatch here, because this is the central one and it scrolls to the beginning. The third one looks good, but the first one scrolls to the middle. So we need to replace these 2 or to switch them around. So this Tap should be applied to Oval 1, and this should be applied to Oval 2. All right, so that should fix it. Let's see, medal and beginning, perfect. Now let's change our color. To do that, when I tap on the second one, which is Oval 2, I'm gonna add a color attribute here. And I'm simply gonna change its fill to white, and I'm gonna change the fill of the other elements to this color, all right? So let's see if that works. Click on the middle one. And there we go. Now let's do the same thing for the other two. Now what I'm gonna click on this one, which is this, and by the way if you're wondering to what element the trigger applies to. Notice that when you select the trigger there is an outline applied to that element. See, now is in the middle dot, first dot, third dot. And the same goes when I select for example Tap on this button you can see this border around the element. That tells you that this trigger applies to this element. So it's very easy to know which one you're working with. So selecting the Tap for the first element, I'm gonna select the first element. I'm gonna change its color to white. And I'm gonna select the other two elements. And I'm gonna change their color, To that, and, To that. And then on the third element, I'm gonna select this, I'm gonna change its color to white. I'm gonna select the other ones and change the color to whatever I had before. All right, so now we should be good to go. Let's do a refresh and see if this thing works. So the first one works, second one works, But not the third one. So let's see what's going on here. Okay, so I think I got it backwards here. So when I click on this, I should change the color of over 1 and 2 to the dark one, and to number 3 to the white. So Oval 3, I set this to white, Oval 1 I set it to the dark one and Oval 2 I set it to the dark one, okay? Preview, And now it works. How cool is that? It's just like having the real thing already coded for you. And that's how you can create some simple animations in ProtoPie. These are pretty pretty awesome, right?. The thing is we've just scratched the surface with this, you can create so much more complex animations than this with ProtoPie. Since that's beyond the scope of this course, we're not gonna go into them. But just as a quick preview, in the next lesson I'm gonna show you some more advanced animations using the touchdown and touch up triggers. So for a quick preview I'll see you in the next lesson.