UI Animation: Timing and Easing in Principle

1. Intro: Hi, ruin and welcome to my second skill share Close. First of all, big things for checking out the class. I hope you guys learned something today. My name is Shell, and I'm a designer and skateboarder from Belgium. I have been skating for the last 10 years. Just thought was could be a cool factory of guys to know about me. So this class is all about user interface animation in principle. And today we're gonna take a look at how we can make this school video reveal effect. We're gonna talk about how we can use video in principle. We're gonna talk about mosque ing. We're gonna talk about animating timing and easy. So this class, it's mainly focused on designers that already have a bit of the basics down off principle. I do go first over some basic principles off principle. And then you guys have the notion that work on video reveal effect. So without further ado, let's get started. And I hope you join me in class 2. Principle Basics: Hey, guys, Thanks for enrolling in the class. So first of all, we're gonna go over the basics of principle. So first off, for those who are new to the tool, what is Principal simply said principle is prototyping to let works very easy, fast and fun. It's made for in direction. So it's need. It needs your input with input. I mean, things like clicks, drags, overs and so on. This is what makes it more fun of faster than, for instance, after effects with principle. You can make cool micro animation school in directions and complete flows between multiple screens. But I use it mainly to prototype website animations. So you might be wondering, How does it work? Well, principal animates appropriately suit change of an object between two or more are boards. Here are two examples. So we're here inside principle and I just made this new document to show you guys how you do on easy text reveal. So I just typed out a text text reveal here, so I mainly use the art board to put a direction on. So I'm gonna press this lightning bolt here. I'm going to step and I'm gonna drag the arrow on the art boards and then it makes a copy out of it so desired to our boards. The transition is gonna go between. So this is the end state where we can see the text. And here I'm just gonna drag this down a bit and put the opacity to zero. So now principal animates this property. The opacity between the two are bored. So if we're gonna go over here to our to our prototyping section here, I'm gonna just step like the direction I put on it. So and I will see there's a text review. So it's that easy. So here's a second example. I'm gonna use a shape instead of some text for now. Just, uh, put a rectangle here in the middle. I'm just going to make it big, bigger like this. And then I'm gonna turn the readers up so it becomes a circle. So then just gonna click on the circle. I'm gonna click lightning bolts drag from the year on this our board. And so it makes Akopian, and over here on this art board, just gonna make it love bigger. So it takes off the whole the whole art board and now we're going to see them. When? Here I click on the circle. Gonna see it here in interaction panel, I click. It is just gonna animated like this. So it's pretty cool to make morphing backgrounds or something. But that that for a second example, so does that for the basics of principle. Like you saw any examples, it works pretty fast and very intuitive. These were just the basics for this. Listen. But in the next lesson will go over how to use groups as masks which we will need for the video reveal effect. 3. Masking: So, like I said in the previous lesson, we're gonna talk about mask groups now. This will give us the knowledge we need for our video reveal effect. So first off, you might be wondering, What's a mask? Well, a mask. It's like a designated area you create where your company to a show. In principle, we use the bounding books of the group as a mask, and that way we can reveal images, text shapes and so on. So why would we use is an animation of the websites By animating the mask instead of an image within it, we can come up with some very cool effects very easily. We can create a group must by just making a group off one or two or more images or objects and and checking the box that says clips of players. And here's an example. So here I made a new document. Justin are born with an image on it and like the thing I said in the previous lesson, if you want to reveal this image without using a mask or something, the way to go would be I would click here on the lightning bolt and click click on the step in direction to make the interaction and then going to drag it here over onto the art boards. What makes a copy? And I'm here on the 1st 1 in the first state. I will drag it off the screen. So where we would click it here, you'll see. Just slides in. So another cool way to do it. So with group mosques, like I said here in a couple seconds ago, I'm just gonna agree this one in this hard work too. So we have our art board with image. Now we have the layer here. I'm just gonna print. I'm gonna press command G to make it a group, and I'm gonna click here on clip, sir. Players. So what do by doing that, we created bounding books is gonna act like like a mosque. So here I can click and drag on the mosque like this, just gonna put out of the screen, gonna click the art board again for the step interaction dragged down there for a copy. And on this art board, I'm just gonna drag it out like this, You see? When way see what we need, way have a much core interaction like this. So that's what the magic off masks off a mass groups is about in principle. So here, for a second example, I just added some text to the image on the left side of it. So we're gonna do group masks on both of them on the text and on the image. So I'm gonna but a group around the image and around it takes by pressing command G and then I'm gonna click slip, sir, players for both groups like this. I'm going to start with the text. So we're gonna drag. We're gonna drag it to the left like this and for the image just the same like this. And we're going to click on the on board for the tepid direction. Make copy out of it like this, and I will have where we have our image. I'm just gonna drag it out again like this and for our text. I'm just gonna do the same so they can look at what we made something like this. So with that effect, we can make a lot of cool things, and we're gonna we're gonna need it for our video reveal effect that we're gonna start in just a couple of lessons. So, like you saw a couple of seconds ago, it's pretty easy to work with mass groups. By using them. We can make more intriguing animations for the users. So that was that for the masks. And now we're gonna take a look at how we can spice it up a bit by using timing and easy. 4. Timing & easing: Now we're gonna take a look at the animate tool in principle, with enemy to weaken and just the timing of objects and the easing of the animation, timing can be very powerful. To give structure to an animation, for instance, we can let an important I told him first or last to give it two more attention. With easing, we can give a certain field to an animation. It can make an animation very calm dynamic or give it a very fast feel. Now we're going to add some timing and easing to the example we made in the previous listen . So we're back in principle with our example we made in the previous lesson. So everything I the only thing I did here was I've put in a new direction from this art board to this, our boards. And the reason for that is that we can easily go back in our preview here for to view it over and over again while we're working on it. So when we want to get into the enemy property off principle, there are two ways you can click here on the animates button like this, or you can click here on the arrow from from First Art Board to the second our board. So click here we get our properties and this is a timeline. So now it's the animation leszcz, like 1/3 of a second. So we have the text group on the layer group. The labour group is an image, so I want the image to go first, and then I want to text to coming. So I'm gonna take these two bars from the text, and I'm gonna put them over here for now. So if it would take a look at this now, you can see that the image goes first and then the text comes in. So I want to make the the animation of the image a bit calmer bits longer. So I'm gonna take, always take the all the property bars, take them, always take them all because otherwise we're gonna get really weird things, like you see, if I drag these over like this, we're gonna have ah, just a longer animation of the image. But if I would do something like this, I would probably get something weird like that. So always think so. Always take all the bars so That's for the image. For the length that I'm gonna take a look at the text longer where I can place it. I'm just gonna make it overlap a bit to make it a bit more interesting and give it something around the same length. Something like this. So that looks like this right now that's mid calmer. But the easing, it's not really that good right now. So if you want to just easing, we can go. You always want to put the easing always again. Like the previous thing. I said, with the length you want to put the easing on both of the bars, we're gonna breath here on the little arrow and I would see we have all these presets. We have defaults. It's a bit easy. Knees out. I like easy easel, but I always use life. This numbers. Oh, something like this. Um, 0.6 0.50 points, 01 and an almost one. If it would take a look at that now, the image would go Go slow first. Then it goes faster than it got slow at the end. So it gives us a nice swoosh fuel. So we're gonna put the same thing on the title. Same thing here to your 0.6 your points. 5.10 point nine Oh, 66 Okay, leg. So now if you take a look at our animation, we can see it's a lot more call. So that's that for timing and easing in this example that's also ate for the fundamentals and basics. And I were going to go over to the video reveal effect, and the first lesson is gonna be setting getting our documents set up. 5. Exercise: Document setup: So now we're gonna take a look at how we're going to set up our document. So first of all, men, take a look at my designs. It's a photo shop, and the most important thing in the beginning to do is to make the different states off your animation. So here's my normal design, the on animated state. And then we're gonna have to state. So the 1st 1 is gonna be the expanding menu. Like this video is in animal. We tempt video going to be revealed over here in this section. So that's important for start to have Oiler states off your animation going to really help you out when you're thinking about how you're going to animate your design. I also wanted to say, If you don't have a design ready or you can think of anything to make, I highly recommend you checking out my first class. That's where I cover the design part where I teach how you can design stuff like this. So another thing that we want to do its we want to export all the assets we need for our animation. So, first of all, we're gonna look at the things that's going to stay consistent in in all three states. So that's particularly the left side title in the text, in the arrows and stuff so that I'm going to export in one in one piece because I don't need it in a different in different states. So then we're going to have to think about what can we do in principle and what do we have to export? So the thing I'm going to have to export is the text layers like this ones because principle is not very good with text. Um, the thing we can do in principle is this black box and is going to be much easier, easier if you use a shape in principle. So I'm just going to start exporting now, probably going to time obsessed because it's boring for you guys. So this is the left part, the image so like this. So it is. I'm going to just export us one piece because it's not going to have to be any made it. So I made a new folder, my desktop, just going Teoh export as a PNG. So it's transparent, and I made a new fuller here on my desktop and I recommend you guys make a full of structure for your different states because we knew if all your assets in one in one folder going to get hectic. So this is general the things that are not going to be moving, it's going to type out text. So So that's export. Now we have it here in PNG so we can place it easily in principle. So the image is another thing that's not going to be moving. So I'm just gonna take image going to export it as well. Actually, this part can go with it. So, like this probably going to start time lips now. So in our here in principle, and the first thing I want to do is make my art boards as big as the our boats we have for the designing photo shop. So this one is 1000 on 1000 pixels, but it's not going to be the right fit. So I'm just going over here to photo shop. But I'm gonna take a look at how big my art Vortis over here in the properties panel, So are our bodies 1005 100 pixels by nine hundreds. So I'm just gonna change it. 0 1005 100 by nine hundreds. So in our art boards, it's ready to be worked on. So the next thing we're gonna do is we're gonna dragging our assets. So here we have a static image that this is all of the stuff that's not going to be animated. So this is going to be aesthetic. I'm just gonna drag it on the art board. It's really important that you guys drag your assets on the art board because, for instance, if I'd drag this one beneath the or board is going to make a new order board and it's not what we want, I'm going to believe this. So I'm gonna place this one here, so that looks OK. So now we want to add our black box. We had, like, over here, and we're going to use a rectangle for debt. So I'm gonna click here on rectangle on our principal, puts a rectangle year in the left upper corner, and now the only thing we need is the dimensions. So I'm gonna go over to photo shop and use the marquee tool over here and then just gonna drag it over the black box to see what you did, what the dimensions are. And we can see that the dimensions are around 40 70 pixels in wits and 360 in height. So 470 put it in over here. So for the width, we had 470 for the high to its A 360. Something like that. I'm going to just drag here in place. Zoom in to see if it lines up with the yellow books. So, like death on the bottom, it looks OK, so now is going to change the color to black. So that's that. And then we're going Todo dragon, The text that was on here. So I have my folder here, ST one. And I'm just going to select this tree. Dragged him on here, um, to drag him over here so I can see them a bit better. So to look over Photoshopped, the 1st 1 we had was the biggest lake and did I mentions from the top are 76 in heights, so I'm just going to put that over here. I'm gonna make a new rectangle just for measurement purposes. So the height waas 76 that we measured. I'm just going to put that over here for the height. So no, that's placed correctly from the height. It's going to look what the distance is from the left. 305. I'm gonna give these a wit off number five and how that items placed correctly. So the next one was schools activity that's going to line up with this one. But we're going to have to measure for the height between these two from the bottom of the letter B to the top of the letter L. It's like 43 pixels. So just going to use directing again the height off 43. So I want to put that over here, and this one is going to go like this. So that's that. Now the only thing we need is the call to action. It's a Seymour effects. So we have that over here that's going to be lined up with this again. Now we're gonna look for the dimensions from the bottom, is going to be around 70 pixels. So again, rectangle 70 pixels put it here on the bottom. Call to action is going to move up a bit So So now we have that. So now we have our first state here. And the way principle works, or rather, the way I work with principle is I already ill. I make all my states on one art board and then, like, for example, for the expanding menu. I'm now going to change this to the to the the big menu. And I'm just going to put these, like as they would be expanded like this, and then I'm going to just hide them so I can reveal them again on the next art boards. So I just make a copy of the first our board, and then we can work on the second order to make the expanding menu. So the way I work with principle is I always make all my states on one art boards. But make this for this example for the video reveal. I'm going to make the second state and the third state invisible on the first art board so we can make it visible on the second board. But it will become more clear when we're working on this. So for now from from my second state, I need the video thumbnail the other effect in the title for the video. So I'm just going to drag that here. She made a mistake. So I'm just going to drag them on the our board like this on a zoom in a bit. And I'm just going to place them as I feel for no. Oh, something like this to be closer to the thumbnail. So I think these ones were going to go up a bit. So and then I think I forgot toe to safe from photo shop is the other culture action insists, See less facts. So I'm just going toe quickly. Do it right now. So the group to export it And that goes in the state to Fuller gold Gold direction less. So now we have done in our folders. So we're gonna hop over back to principle. We're gonna put the skull direction here, so it's going to go on the same exact location. So I'm just going to line the see you up like this, and then the thing year, I want to make it invisible so we can make it visible on the next art board. So the thing I'm gonna do here is just going to change the opacity to zero like this. And then we're going to the title for the terminal of the video and the video. This group together is going to come from the bottom. So we're gonna have after put that down and put the opacity to zero as well as this one. So we're gonna take this one and this one, and they're going to have to cover a lot of distance because this this to are the ones they follow. And these these 1st 2 are coming from down here. So it's quite a distance Day travel. So I'm going to drag these down like they would stand here under them like this. And I'm going to put your capacity down to zero like this. And then I'm just going to said he's back in place and in the height off the rectangle is going to go back to it was 360. Want to drink this just down again? So in our now, this looks again like the first state. But it has the second state on its invisible. So for the third States, we first want the menu to go like this and then we wanted to take the whole with and here is going to go a video. But for now, we can just put in an image in there for it works much easier than, like for say, we put the video in it right now because it has to render in and all that stuff. So I'm just going to go toe unspool Esh real quick. My facebook goingto splash and I'm just going to take one of the first pictures. I see it's not really important because we're going to change it to the video. So I'm just going toe copy Did this year go back over to principle and you're gonna breast come on TV, baste it in place. And now video is probably gonna be something like this. But the reason I explained the mosques because we're gonna use a mosque to reveal it to come from the left here. So the first time when it was making the group and breath clips of players to make it to make it a mask, and now we can make this a bit shorter so image will stay in place, so it's probably going to be something like this and then for the video here, I exported my pause button. So I'm just gonna go over here and grab Death Dragon in here. So now we have that pause button over here, and then we need, like, a progress bar. So for a progress bar, I'm just going to use, um, two rectangles. Just gonna drag it over here, make it lots smaller in height, so it could be a bar. Probably going to be around to something like this, and then I'm going to drag it over like it would be progress bar. So this to come down a bit like this. So now it's great. So I'm gonna make it white. And this is not the progress of the video, but the placeholder. So I'm gonna make give this an opacity off, like, around 30% or something. So does that mean I'm gonna make a copy of it? Come on, C Command V. And this is going to be the part. That's all that's playing. Going to be the indicator. So it is going to be come here the height of two, and then this one is going to be completely white, so I'm gonna turn the best yet again. Gonna look at the placement. So the airline something like this. So that's that for our video. Don't have to worry about these two right now because these are gonna go weighing in transition. So the thing I want to do here is I want to make this video reveal from the left and so as well as the progress bars. So I'm just gonna make this the pause button gonna give it an opacity of Ciro because it's not going to be that important. And then I'm going to give this the placeholder for the progress of the video. I'm going to make it a group. It's not really necessary to make it a group, but I find that it works easier to make things go from left to right if you do it in a group. So I'm just gonna clip some players here and I'm just gonna drag. It's so it has zero wit like we see here and then with this one into the same is gonna recall on, um, progress and police holders progress. So progress again, clips of players gonna drag it to the left so that the witness zero and then for the video . We already made it a group with clips, clips of players. So we can already do this. So this is going to go like this. So actually, you always have to think about you have to think about your outcome and reverse engineers what you had in mind for your for your animation. So I wanted to do this. So I'm gonna first have to make it like this. And in this part, I'm gonna make lately. So the witnesses zero for now. So that's that. So now we can drag this back over to around 470. I'm gonna make 470 over here. And then the wit waas the height waas 600 thoroughly. 0 360 Sorry. Like this Gonna drag it down again. So now we have our first state here. But all the states are in here, but they are invented invisible. So that was that for the set up. And now we're gonna go over to making the expanding menu 6. Exercise: Expanding menu: So now we're gonna make the menu reveal expanding menu. So, like I said in the previous video we now have our are our board here with all our states on , it's just a state two and three are invisible. So the thing I'm gonna do now, I could make this one clickable if it was for a client. And they have to use it in foreign direction and stuff. But just for for sake of more being more easy, I'm gonna make the artwork the art board clickable, so we can check it out more easier in our preview. So I'm gonna click here on the lightning bolts. I'm gonna choose a step interaction, and I'm just gonna drag it onto the heart boards so it makes a copy out of it. So now we have a transition from this artwork to disorder boards, and we want the menu to be expanded on this one. So I'm just gonna take the rectangle here to black box, and I'm gonna drag it over here and this and this fact that we had is going to go up here, and then we had, like, we had this one going to put the opacity back toe 100. And we had the video and and the title of video. So that's when this one is going to go right around here and again change the opacity. So that was just placement on feeling. But now that we can see them to drag them a bit closer, So spacing quite the same between these and then the video and text with the video, I'm going to drag a little bit to the top like this, And this one is going to be the cult direction is going to change from Seymour effects to see less fact. So Seymour effects is going to be What does it mean? So I can click it. So this is the Seymour going to with the opacity to zero and then I'm gonna take this one, Does the c t. A. For less facts, and I'm gonna put the capacity to 100. So now principle is going to make an animation from this art board to disorder board. So the things we changed, those are the things that we're going to see in our preview. It would take a look at this also, the thing I'm gonna do just for to make it easy. I'm going to make this black box clickable to make it go back to the first states so we can take a look at our interaction that we made a bit easier. So now if you take a look at what principal did, you can click here on the or board wherever we want, because we make that interaction going to do this. So now we have death, I can click you to make it go up again. So now that's already pretty cool. But now we're going to look into the animate properties and easing off this because now it's a bit dull because everything goes the same time, Same speed. So the first thing I'm gonna do isn't gonna direct this a little bit closer against weekend if you look at what we're working on. So I'm gonna click here on this arrow the open of the animate property. And the first thing I'm gonna do is I'm gonna take a look at our black box, this one So it's called Layer here. I'm gonna change. I don't know. They're gonna change. I'm going change here too. Black books. So it's really important that you name your layers the same thing on both our boards because otherwise it's not going to make the animation. So now they have the same name. You're gonna check it out. It still works Gates to working. So I want this to be a bit longer, so I'm just gonna take all the rests and put that a little bit later so I can see what what the black box does. I'm going to this. I'm just going to be something around. Just gonna try out one second and I'm going to select the two bars because you always want to do with what you're changing on both bars here. Like if you would say, the black box would have, like, 12 properties changing, and you would have to put your changes on all 12 bars, so I'm going to go into the to the easy. I'm gonna change it through the that the properties I always almost always use and those over around like 0.6 and 0.5 0.1 and 0.99 And this actually makes something that's a bit easing and he's out. So that means that it's I'm going to go slow at first. Then it goes really fast and go slow again. So if it would take a look at that, the only thing we did now is the black box. Okay, take a look here. See, it's already a little bit cooler, but now, maybe, maybe a bit too long, So I'm just going to drag it in a bit. Gonna take a look at that. That kind of liked it. So that that now I want these items like this fact and this fact in this factor in the video with the title, I want these to be staggered. And what that means is that the commune, it's different there space between their animation. So the 1st 1 is the biggest Leggett's here. That's fact one. So I'm just gonna take this property. I'm gonna put it first, actually. All going to put them to get her here. So first the box goes and all the stuff that's in the books goes after that. So first you have affect one. So that stays here. There we affect to factor. Victor Weaken, Put like now it's on 0.7 I think I'm gonna work with spaces off like, I think, around seven. So it is going to go around 14. And you see here that only the why property has changed because they were always visible in the 1st 1 So then we have affect three. And there we have the Y property and the opacity. So we're just gonna take this boat and they're going over to 14. So now there would go in the same thymus fact to No, I'm just gonna at 0.7 So now he goes up to 21 and then we have the video term nail with the title of the video. So that's all this, And this is going to go from 21 to 28. So now we would already have, ah, of a cool, staggering animation. This one is just in opacity, so we don't want to grab attention from the user. So this one is just going to change capacity, and it may start at the beginning. So now we're gonna take a look at what we did. So now I see that the text is going faster than the bugs that we have, and it's mainly also because we don't have easing on there. So I'm just gonna try out If I made these in the same length roughly as the black box, that would change anything. So it's already giving a pretty cool effect. But now we see that the text doesn't have the same easing as a black box. And that's the reason for that. The text goes first here, so I'm just gonna select going to select these all of the items in the black books and I'm just gonna click here. So you want them all, select it, and then we're just gonna click here and add in the same value So 0.60 point 50.10 point 99 So now if you would take a look at that, I think that would fix it. So that's already starting to look cool. There's fronting wrong with the blood. Looks at the ends going to, but he's a little bit later. Do you like that? That's already starting to look pretty cool. So yeah, that's that for the expanding menu and our going toe. Take a look in the next video. How we're going to make the video reveal with the progress bars off the time of the video and how we can import video into principle. 7. Exercise: Video reveal: So now we're gonna take a look at how we can make the video reveal from this state. So we're gonna go from the second states to the last state. So now we already have an animation going from this art boards to this art board to make the expanding menu. So now we're gonna go over to the 31. So the thing we want is that the video is going to be clickable. So we're gonna presently the lightning bolt here again, and we're gonna drag the step interaction over on this, our board to make a copy of it. So now we have our third are bored and we just want to create a state here we wanted to be . So I'm just gonna drag this one to the right like death. And then this one, this one, this one phenomena put on opposite zero and video swelled video. It's also going to be on zero opacity. I'm the reason I'm leaving this one for now is because I forgot the text that comes under the video when it's revealed. So that's a good way to show you guys how you can add another element when you're already deep into your animation. So the first thing we want to do if we want our video over here we wanted to expand. Oh, our video. Just going to give it a little bit of it so we can drag the handle likeness. So, going to be something like this And then this one, actually, this one we're gonna breast command, see, Because this is the original one from the expanding manual. We don't need that one. I'm gonna put opacity zero on this one as well. So this one is going to go away on the state, and I'm going to press command V. So we have a new one. This one is going to go slightly up here. So now we have our text here is going to go with a video, but it's not on the previous art board. So I'm just gonna press comment, see gonna go over to the second art board over here. I'm just gonna press comment, V and now it stands over here. But the animation we wanted to have here is I wanted to come from the bottom to the top. So for that reason, I'm going to put it a little bit down here and they're gonna press shift in and with the arrow keys. 123 Something like this. And I'm gonna put the opacity to zero Everyone that because in first State, it's also not visible. So now we have it here in this state. I'm just gonna press. Come on, see again and put it over here on this cardboard command fee. So now it's in all our states and principal knows exactly where it's very needs to come from. So now here on our video, the only thing we needed our progress bars and are pause button. So this is a possible tin. This is just going to get opacity, hundreds like this, and then we have our placeholder from a progress bar just going to give it a little bit of with so we can see it like this. And I'm just going to drag it to the right. Something like this, and for the progress going to be something around the same. Going to give it some wit like this is the end state of it. Oh, my bet. So this is the end state of it, and this is going to move very slowly because that indicates the video is playing. So this all also is going to go away. That's zero. And then we have Ah, a little close button right there. So and that's going to get open athe hundreds. So got to direct it up here. So, like this, I'm also going to give this art board and in direction to go back to the previous states. And when just going to step here and I'm gonna do it on the close button, I'm going to step interactions going down here to the second state. We can see what we're working on. So now for looking at what we did President. Close button. So now protect the video. We get our interaction principal made, so it's going to be something like this. But like you can see, the timing is off and just it doesn't look good. So now we're gonna look into, ah, timing off our elements, and we're gonna make this bar go very slowly. So like in the previous one, I'm going to click on the arrow between the art boards like this. So now we get our interaction. I our properties. So the first thing I'm gonna do. The first thing that has to be that has to happen. Is that these items, the texts and the video Tamil and all that stuff that that that must go away. So we have our affect. One. It's going to go first and fake to. Now we have factory. This a principle here takes the the length I put on it in the previous state. But I'm just going to change it back to the custom thief addict, the default state. So like this. So it's faked 12 and three. Then we have the video video term Neil and video title is going to go again over here. Give it the same length of the rests and I'm gonna put this back to default. So, like this also back to default like this. And then here we have the video title. For now, I'm going to leave it as as it is. So the first thing you want to do is is that the opacity changes so that these items go away from the black box. So these this animation has to go first. So we affect one fact to selectors effective factory in the video term nail in the video title and the call to action, It's us. See less. So does this one. So these are going to go first. Actually, I have to select all the rest. So this one, this one This one This one This one This one This one These knots and black box and and the clothes in the video title. So these air going over like this when we look at that normally now the items would go away first. So it's looking already a little bit better, but I think it would be cool if the items go away staggered. So the one on the top goes away first, and then the title here goes away last. So if this is our timeline, the one that goes first suspect one. So that stays in place. So I'm just going to select all the rest. It's in there. So effect, too. Effect three. The video term nail and video title Those are going because I'm working in space is off. Seven. I'm going to keep that that that value to keep the animation consistent so that that infect to ghost so than these goes to 14 in fact, Rego. So that stays there. So these go to 21 like this? That's video Tommy on the video title. So the city are the city a here for less. That can go immediately because we don't want to draw attention. I'm actually going to make a little bit shorter. Arrest will. So nothing would take a look at that. They would see that the goes first. And so it goes really fast right now because there's some overlapping. But I'm just going to take on these items off the video and on video title over here, going to go like this just to make my point. Like you can see that this one goes first and then the doors close. So now I can see it as a little bit. It's just a little detail, but little details can go a long way. So the next thing we want to do we want to change the timing and easing off the video revealed. So that's the mask we have around our image right now, so I'm going to do death. So I'm just gonna head over to, uh, our video and it's right here. So again, you wanted you want to change your your lengthen easing on both of the barter tests right here. So I'm just going to make it a little bit longer, Something anything like around here. And I'm gonna select those two, and then I'm going to add the same easing values toe 0.60 point 05 0.10 point 99 like this and and just to have a good few were in our preview on going to put all the stuff that is the progress born possibility a little bit later so we can see our animation. Very good. So I'm just going to do it again. So that's already starting to look pretty cool. So those goes away, the black books expands. Actually, the black box goes a little bit too fast right now, so I'm just gonna head over to the black box right here. So those are the stew bars, and I'm going to make these ones also roughly around the same length as the video reveal, and I'm gonna put the same easing on there. So again. 0.60 point 50.10 point 99 like this. So if you take a look at the that's starting to look pretty cool because the two items have the same animation. But there's a little bit delay on there. Give it a little. I give it really nice feel. So we have the black books and in the video going. So the next thing we want to do is the timeline here we wanted to make. We want to make it go really slowly, so it looks like it's like a video player that indicates how far you are in video. So the thing we're gonna do with debt, toe the place, all the progress also just for the details. This is the background. I'm just going to do the same thing as I did on video to make it consistent. So I'm gonna take these two, and I'm going to make them roughly the same length as our video reveal like this and select them boats again on going toe at our easing value. 0.60 point 550.10 point 99 So now we'll see. That has the same effect. Now you saw that the white progress indicator was a little shabby, but doesn't because we haven't touched it yet. So now for our progress right here. We just actually wanted to make it really long, so it goes really slowly. So I'm just going to drag this over. It is gonna take a look at how it would look at, like, eight seconds or something. Take a look at it right now. Now we see it looks like a video. It's playing. Maybe it goes a little bit do fast right now, so I'm just gonna drag it to around 12 seconds or something. Something like this. Something like that. If you take a look at that now, it actually looks like a video. It's playing. So taking it again an extra look right now to see if there's something else we have to change. Maybe the title can come a little bit later, so I'm gonna take a look at that. It's gonna scroll back. And then here we have our title video title here, and I'm gonna give it I'm just gonna try it out, give it roughly the same length again at some of our other items selected to again. And it also it already had the value. So it's pretty cool. So I'm just gonna check it out. Maybe I'm gonna put it a little bit later. So that video comes in first and then the title comes in is the last detail. Yeah, I like that. So now the only thing left actually is to have a video in here. And actually awas really surprised when I when I heard about how how you could do this and actually really easy. So here we have our group of the video and in our group, we can see that we have We now have just the image that's in That's in there, in in the mosque, in a group of the video. So I downloaded a little video off some drone footage off Lake, and, um, I just got it. So it was around like, 10 seconds and pretty short on pretty low in quality just for rendering purposes. So this is the little video that I had, and it's really this easy. Just grab it and you just drag it into the mosque. I didn't go into the mosque, but here's our video is gonna changed here, too, that it's in our mosque is going to drag it so it covers our fields. Something like this. So now if it would take a look here to our final product that we meet, we can see that we have Here are First State and then we can click here. Seymour effects. We haven't expanding menu. We click on the video and video reveals and the video it's playing. So that's that for the video reveal effect. I'm going toe uploads deism source file So you can guys check that out. I hope you guys enjoyed it, and I hope you guys learn something. 8. Class project: So I hope you guys learn something from from the lessons. Now it's your turn to make something awesome. Be sure to have all your states of the animation designed because they will help you out of lots to think about how we're gonna work from from the beginning. Also, think about High Wonder User to feel when they would see your animation. If it's a website for a spot, for example, you want to be very Call me. I want you guys to post your different states of your animations and your final animation here in the class project, and I'll check them out for sure. And I will give you guys some feedback. Also, if you guys have no idea what to do for a design before you start on the animation, I highly recommend checking out my previous class here on skill share. I covered the design parts over there, looking forward to what you guys are gonna come up with and remember, have fun with it. 9. Roundup: So that was it for the class. I hope you guys learn something from it. I'm always open to feedback. So if you guys know any faster ways to work in principle or something, just let me know down in the comments. I hope you guys could make some cool things in the class project. And I'm really looking forward to what you guys are gonna come up with. I'm also going to check it out. I'm going to give you guys some feedback on. But was it for the class? Thanks for sticking with me. Huge. Thank you for checking out the class. It's now the day off. New Year's Eve here, Belgium. So way should guys all Happy New Year on May 2018 Big great year. Freeze! So things, guys.