Animating with Principle

1. Intro: Hey, guys. Welcome to animating with principles. My name is Karen. Bother. I'm a freelance. You I and a lot of designer. In this course, I would be going over principle an excellent tool for quickly and easily creating animations and interactions for your designs. We will be going over the tools of principle. And then we will recreate the animation we see here from start to finish without it the way . 2. Downloading Principle: welcome. And thanks for enrolling in the class. Before we begin, you're gonna need to go ahead and download and install principle, which you can get at principal for mac dot com. You can download the free trial, which I believe last for 14 days. After that, you can always purchase it whenever you want to. The other tool you get in need is sketch, which you can download at sketch app dot com, and it seems you're here. You can download the free trial and purchase it whenever you want. Once you have those two downloaded and installed, you can go ahead and click on the next video. 3. Principle interface and basic animation: Okay, so you downloaded and installed principle. That should be pretty much the first screen you see. Once you open up a new documents, we're just gonna go over the overall user interface. The top section here is where you can add a new blocks. So, for example, if you click on the rectangle, it's gonna instantly creates and you'll ear right here. And this is a rectangle here. Um, next to it is a way to add text. So if you click on it, it adds text layer the art board once he quickly that it's going to create a new art board in the later on. Verlander had to jump between art boards. Go ahead and eat this one. This is a sketch import feature which is very handy and will be using in the next video. Once you click on this, it opens up sketch, and it imports. Whatever sketch document you have straight into principle, you're gonna have some more advanced features here which will get into leader on your drivers and Adami's. The group and Fordham Backwards are pretty self explanatory group. If you click on multiple items quick on group in groups, then into one earlier. Gladly, this Fordham back simply moved layers back and forth. Here you have your alignment tools, but just pretty straightforward on here. You have your properties for the later you're on. For example, we're on this letter now, and you'll notice the X and Y coordinates change once you move it around. Same with the width and height. It's pretty straightforward as the rotation, so you can rotate your object. This is a skill. She could make it bigger and smaller. You rapacity, straightforward and the religious. She could make some rounded corners. And these are your colors. This is a way to import a image to take place instead of the square. Just likes kitchens. This is the stroke. Create a stroke on object. As you can see here, you can also add shadows. Just a blur for the shadow. It'll just the direction as well. And we'll get into the horizontal vertical, uh, bit leader off. So what? This figure as well we're gonna learn a little bit about the basics of animation in principle. Gonna go ahead and delete this there. We're gonna make just a very simple video of a square. And when you click on it, We're gonna transform it into a circle. So we have the square here, I'm gonna align it center of the art board. Um, so once you click on an item from principal, you're going to see this little flash icon here. Once you click on this, you're gonna have some properties. So for this case, we're going to say when we tap on this square way, want toe, go to a new screen. So I'm gonna click and hold, and I go over my art board. What that's gonna do is that's gonna duplicate my art board and create another one with the same properties already here. So right now, when you click on at this square, it's going to go to this. That may extend. There's nothing different here. So, for example, I'm just going to take this and I'm gonna move it to the top. But I'm also going to say when you quick on this quick, quick tap and go to this screen. So now when you tap on this square, it's gonna go back to this defense, our book, that being said, when they open up our preview here, have a quick the rewind button right here and now when I go over this and put on it, it moves to the top quick on it again and moved to the bottle. But like I said before, we're going to make it. When you click on it, it's gonna turn into circle. So let's do that. So let me take the square, Bring it back to this center as well. And I'm gonna make the radius off the square like 100 which is a match to make it into a circle. So now if I opened back my preview on a click on the square, close the circle goes to the square. This gives you an idea of the basics off animation. You could pretty much do whatever you want. So, for example, when you click on the circle, we could change its color, and it's gonna naturally transition from this color to this color. We can also make it, uh, to make it moves before we get a shadow to it. And so could you actually do all these once you are over And principal does a great job of keeping the animations nice and smooth, so they always transition between the properties. That's pretty much the basics of animation and the U I of principle and the next you're going to go ahead and look at sketch and look at her design and plan how we're gonna important it into principle. 4. Planning and importing: Okay, so here we are in sketch. Now, the main purpose of this whole courses really Teoh to go over principle and the animation process in there. So for that sake have already designed the interface here in sketch, I'm assuming you probably already have a design as well, whether it's for mobile or a Web app, whatever the case may be, that will also work for this case. I did a little mock up of an application for movies. It's a way for you to set up maybe your favorite movies or something along those lines. The idea here is that you have a profile shot, a type of my favorites and then your list of movies. There are a bunch that I added. Here I just add the thumbnail as well as the title and maybe the categories of the movie. And I also made a details page. So, for example, if you click on Kill Bill just down here, we wanted to go to this screen. So once I set these two pages up, now it's time to think about how we want this to animate. How do we want the transitions to appear when you click on a certain movie and maybe how you want the pages to load. What I had in mind was when you load the initial page, this profile page, we would make everything come on this comedian very fast, but in a coolly um So what I was thinking is possibly this green bar would start off canvas here and it'll slide down. Go up top here. Um, maybe the arrow and the menu will slide. And very quickly, the profile image maybe is small, and we and we grow it very quickly as well. And we would make the title feed in as well as these movies quickly pop up one by one. Of course, maybe the back and the menu would probably not be animated in a real life scenario. But just for the sake of this tutorial, I'm gonna get animate them in new ways. Um and then I thought I had for the movie. When you click on Kill Bill, for example, the top section in the bottom section would both slide in and from the top from the bottom , and then the title would come, and somehow maybe it'll just fade in and slide up very quickly and same thing with the movie description. Now that we have that planning in her head and we have an idea of how we want to stay animate, it's time to go ahead and import these into sketch. There are a couple ways to import the the file. The easiest way is to use catches, um, import feature. So I'm not sketches. Their principles import mitri. I'm gonna go ahead and open principle and because I have the document open in sketch if I click, Import is going to recognize that I have this document opened. AmerGen I just click import, and it does a great job of quickly importing everything on their own layers, depending on how how I had the folder structure in sketch, it retains that folder structure, which is awesome. Um, and it does, um, flatten the text so it's no longer attacks. You can't actually edited text in here, but it is, um, for the sake, it's mainly just just the prototypes. We probably don't even need it to be a modifiable, but just something to be aware of. It looks like everything imported properly, except for title here. Kill Bill to that, there's an issue. Um, with the masking, which, uh, for now I'm just gonna leave it. And then when we come to this to this section, I will re abort just this piece. Another way of importing your your assets is piece by piece. So, for example, if I go to sketch and I ask that we can do this right now and I click on the skill Bill's title simply copy command, see, and open principle and command V it imports it with all its properties. For example, the drop shadow here, So copy and pasting works really, really well between sketch and principle. The only thing is that it doesn't get position in the race spot, so we're gonna have to move it manually here. So now that you know it's in the right spot, I'm gonna delete the one behind it. So this gives you an idea of how easy it is to get your designs from sketch to principle. And in the next video, we'll go ahead and start animating these piece by piece 5. Animating intro screen: All right, so we're here now. In principle, we have both our art boards. They're all layered, um, and ready to be animated. Um, the first thing we're gonna do is, um, like we talked about in the previous video. We're gonna We have an idea of how we want this to Adami. We want the green box to slide in. We want the back and a menu icons to come in from the edges. Ah, and the profile picture here to pop up and the movies, you're gonna come up individually and so on. So let's start by. First thing we're gonna do, actually is we're gonna make sure we're received, so we're just gonna quick command s save what's make sure we're all safe, though. Coal mine movies app. Okay, um, prison gonna do is I'm gonna click on my profile art board. I'm gonna click on this flash sign and then click and hold auto and have her over the airport here like, oh, and what that's going to do that's going to duplicate my art. Bored with all the same layers on bond, everything position the way they should be. Um, I'm gonna now, which renamed these are pours the 1st 1 I'm gonna call a profile empty. And the 2nd 1 I'm gonna call it's just profile. So empty is because initially it's gonna be empty. And then all these items are gonna come in super fast, But in a cool way, I'm gonna quick on my green box and again Ah, move it all the way up. So by default, it's above canvas, so I can't see it. And you notice it changes on a preview here. Now, as soon as I'm gonna move my mouse cursor onto the screen, notice it animates in mess because auto ah, it comes in by itself. So it's that easy, and we already have a little animation going on. Um, let's get everything coming in, and then we'll fix up the timing. Next thing we're gonna do is I'm gonna hover over the arrow that's here, getting moving off canvas. I'm also gonna do the same thing for the menu here. Okay, let's do a quick preview. I'm gonna have over here notice how the all coming did the same thing with a profile shot. I'm gonna change the scale to zero means it's so small that it doesn't exist. And, uh, still preview now, quickly. Video you notices. I'm hovering here. Everything's coming in now. It all comes in at the same time, so it doesn't look cool. There's no ah, like fluid motion to it. It feels a little bit robotic. The moments, But we're gonna fix that. I'm also gonna take my favorites, and I'm gonna change the opacity. 20 So that's gonna feed it. So now that we have, um, all these ah animations set up, let's fix up with timing. We're going to do these movies shortly after, but for now, let's take care of the whole top area. So I'm going to click on the arrow here, which is the transition between these two, and that's gonna pop up a timeline here at the bottom with all the layers and how they're, uh, how and when they're moving. So currently, by default, they all take exactly 0.3 seconds. You noticed that 0.3 pops up when I hold the key friend here. And there is no easy on the notice of default here for all of and it tells you what it's moving. For example, of my favorites is is just changing the capacity. The profile is changing the scale. The menu is good. Is the x abolition? So was the back and the gridlocked with white position. So, um, first we're gonna do is I'm gonna grab all the points here, and I'm gonna take them, maybe all the way up to one second. That might be too long, but the straight out and see how that looks. And the next thing I'm gonna do is well, I'm gonna select all of these. I'm gonna change the easing to be, um, like, a very strong ease in and ease out and what that is, I'm going to use a custom province. You're gonna quit one 001 And that kind of creates that s shape. Which means it's gonna come in super fast, slow down, and then go and and superfast click enter. So now they all come in with that effect. Let's see how that looks. I'm gonna click the rewind button here. I'm gonna hover down. You notice how now they all have that affect them? They also I'll take one second, choose it a little bit of a little bit time, so you can see it's animating and it looks cool. One thing that looks a little bit off right now is they all come in at the same exact time . So let's give it a little bit off life and, um, have them going a little bit different times. The first thing you gotta do is maybe have the green box coming by itself. So this is the green box here. Um, and I'm gonna have the profile coming shortly after and then the menu in back. Ah, my cost story after that and the my favorites get freed in a little bit after that. So it's all super subtle, but creates a little cool effect. So quick rewind you notice. Now, profile comes in, then that slides down and looks looks pretty cool. That's that. Pretty easy. Now, let's do the movies. Um, we're gonna make all the movies come in individually, which is gonna look cool. Love it. More work. But at the end, I think it's gonna be a nice payoff. So I'm gonna click on this, and it's currently in a folder double quick into that folder and years all my layers, just like they weren't sketch um and they're ordered in the right way. For example, Toy Story's on top after the future Braveheart and you notice the order here is the same, which is just going to make it easy for us to Tammy. So I'm gonna click all these movies and again, I'm on the auto. I'm on the initial screen here. When it's all empty and I'm gonna move them down, I'm gonna hold shift and put the down arrow 12345 So 50 pixels and I'm also gonna make them all zero a passage E So now they're all invisible and they're a little bit down. And then here they're in the right position and their full capacity, Same thing here. I'm going to select them all. And I'm gonna change the easing effect of the same thing. 1001 So strong, Easy in and out, and I'm gonna make them all as well take one second. Let's see how this looks first, and then we're gonna fix the climbing just like we thought. They all slide in again. They're coming in at the same exact time, which looks a little bit weird, but we will fix that. So that's, um let's take them one way. Well, so let's take back to the future now and move it just a little bit after Toy Story. Maybe a 0.5, so just very subtle. And the other 1 to 10. I'm a child's play. 15. The tea's every 20 interstellar 25 turkey. So it's super settle, but they come in a little bit, one after each other. Okay, so let's see how this looks. Here we go. So maybe they need to be moving just a little bit. Ah, more than 50 pixels. I'm gonna take all the movies here, and I'm gonna move them down. Another 12345 Another 50 pixels, which will make that transition a little bit. There we go. What's better? That's pretty cool. One thing gonna do is I'm gonna make all the movies come in slightly after. So you see the other header items come in. And then, then well, he's coming. We're gonna select them all getting dragged them somewhere. Maybe somewhere here half a second, and they're all gonna come in. So all those together is taking a second and 1/2. So it's barely anything, but it creates a cool affair. We go pretty cool. So that's fact. Um, in the next video, we're gonna do some interactions. So when you, uh when you swipe up here, we're gonna have these movies come up, and we're going to shrink the, uh, profile picture. Um, I know about kind of stuff. So go ahead and put the next video, and we'll get to that section. 6. Drivers and interactions: All right, So now that we have the intro animation looking all cool, we're gonna add some, uh, interactions here. So when you scroll up going to do this little transition here, Um, So here, we're gonna get into the drivers. So when you click on drivers up top here, um, actually, before you do that But, uh, what we want to do is we want to make this the movies, be something that you can scroll. So when you click on the movies here and you go left here and under vertical Quick this and quick scroll. So what that means Let me just go with a pretty right now what? That means this is the house credible? Just like that? Now it's ah, not doing what he wants, but we're gonna fix that. So what we now that this is cruel Herbal on its in a group here, Um, you take the point here and drag it up top here because we want it to scroll from here to here. And we also want to scroll to the end of the regional in it, Do this and move this year. I'm also gonna quick this thing here, which says, equip some Blair's When I quit that this stuff disappears. So when I go back to my preview line and swipe up So you noticed how this scrolls here. Now, the reason why just goes here is because, um, the movie's end here. So if I take this and move it up here, come back here. Now I can sleep a bit up higher. Um, so let's make it somewhere around here. Okay? So now we have now that we have this scroll effect if we go to drivers. Ah, you'll notice I have a timeline here. And if I take this timeline movie, it's pretty much a timeline of the scroll effects. So, um, so we can have certain things happen at certain points of this cruel. Um, you'll see what I mean in a minute. Um, so we want it when you scroll, so I'm gonna take this and dragon. We want it when you scroll to around here around this point right here. We want this image to start shrinking, so I'm going to click on this image, and I'm gonna click on the plus side right here, and I want to change its scale. So I'm gonna add a key frame right here. What's gonna start at this point of the school and I'm gonna make it end. But it's at this points of this cruel and what that's going to do that the scale is gonna become C 0.3, Um, as well as we want the Y position to change. So I'm gonna add another key frame at the same point right here, which is the Y position and that I get and go back to this. Keep in here and I'm gonna make it be right here. So just with that, you'll notice now as I'm scrolling. And when I hit this point in time, this animation is gonna start and it's gonna push this down and boom stick here. So there's still some problems here as you notice, and we'll fix that up. So the problem here is that this, um, this schooling effect is coming up too high. So I'm gonna take this and I'm gonna drag it down around here. I'm also gonna make maybe this scale down just a little bit more. Maybe 0.2. I don't get but but oops. Gonna bump up its position just the attack. So look again. So when it comes here, who comes up and you know what? I'm gonna make it, uh, start coming in just a little bit faster when I take these two key frames gonna move them right here, which is gonna make it start moving a little bit sooner. Pretty cool. Another thing we're gonna do is we're gonna make them my favorites. Freed outs, um, around around here. So I'm gonna quick on my favorites, and I'm gonna click the plus sign here and go to a passage E and I This points, I'm gonna make capacity zero the same deal. Uh, when it hits this point in time starts feeding out this stuff starts pushing. Pretty simple. Let's go to our preview trying so very simple and pretty cool effect. All right. Um, next thing we're gonna do is that we're gonna make ah, the transition on the kill bill. When you click on that, it's gonna Adami. Ah, the movie coming in. So, um, let us click on the movie kill Bill. So if I double click here going to this group, click on the folder and then click on, uh, the flash sign here, and we want this to be a tap. So when you tap on it, we're going to go to this screen here. So if I try this out right now, but it just goes right away because there's no transitions, but we will do that in a second. Since I'm here, I'm gonna also make it when you put on the back. But we're going to go back to the screen here, just so we have a way to go back and forth. All right, so we're gonna take a similar concept that we did here. So on by default, these are all going to come in. Um, it's gonna be pretty simple pretty quick. So, um, what I'm gonna do here is I'm gonna click on this entire art board. Did the same thing quick on this Goto Otto and go here. Um, so when you tap on this kind of go here, then it's gonna go here. That being said now, on this screen, we can do some things. For example, we're gonna make this yellow box be all the way up on tough. We're gonna make this bottom section all the way down and we're gonna make these three, uh, opacity zero, and we're gonna make them also beat down a little bit. 12345 And same thing with the title. We're gonna make it capacity zero, and we're gonna move it. Ah, let's see this one come from up. So gonna give it up. 12345 So now quick, on the auto on here. They're all my transitions again. Right now, there is no easing or no real timing to them all. But let's do what we did to, uh, the first screen. Take thes Oh, make them one second and get a select. All of them again and quick. This in same position 1001 Just so has a consistent feel to the initial street. Um, let's see how this looks, Really? There's no timing, and they all come at the same time, but still pretty cool. Something wrong here. Notice there's something wrong with the movies year, but that's OK, so let's try now click on Kill Bill. Go. So it's missing some, uh, some cool effects, for example, how the screen goals from the screen to the other screen, but we'll fix that in a second. First thing I want to see is why this back? But it is not working. I think I know why. It's because we didn't link it from here so quickly. Here. Go back just so we can see her animations. Let's try this again. Boom, Boom! So what's making it not look too cool? Is the fact that it quickly jumps from the other screen to this screen? Um, the way we should do it is that these items go off the screen and then the other one comes , comes in. So what we're gonna do is we're gonna take these movies and we're gonna pace them on to this artwork. Um, but what we're gonna do, actually, before I do that, let me go back to drivers and go back to the first tee frame. So we're seeing this. The initial. I want a quote zero right here. So I'm gonna click on these movies, and I'm gonna paste them into this art board, and I'm gonna fade them out. So opacity zero. I'm also gonna move them down a little bit. So what that does is when I click on Kill Bill instead of it quickly jumping. These movies are gonna fade outs and slide down. I'm gonna do the same thing for these guys here. So the green box and the profile picture and the my favorites gonna copy them all, paste them here and maybe the green box. I'm gonna make it slide up, um, profile. Gonna make it go scale zero and the favorites. I'm gonna make that just freak out. See how this looks quickly. So quickly. Kill Bill. It was a little bit slow right now. It takes some time. And also, one major thing is the background color, all changes, which makes it look pretty harsh. So I'm gonna click on this art board, and I notice there's Phil. You're gonna change that toe whites. Let's see how this looks now getting there when the reason why I still jumping the black is because this airport here is black. So I'm gonna quit on this quick refill that white as well. And things were going to get a lot smoother. Now I think cock your bill. Boom, boom, boom. Great. Cool. Put on the back weapon quickly jumps here, um, clicking on the back. But then let me take this here. This board delete the transition here. This room. Okay. Okay, so that's pretty cool. Um, look at this one more time. So again, something's messed up here a little bit, but that's okay. You got the the idea from the initial lesson with on this this comes out these vato. This comes in pretty cool. So couple of the cool effects you can do if you want to play around with the easy options. So let me, for example, go back to our initial Ah, initial intro. Quick on line here. And let's let's look at the profile. I can change this custom to something like spring, which will give it a balance. The effect eso you look now, I mean preview, go back, notice how this kind of jumps and has a little balance to it. So you can play around with some of these that you don't have to always use the customer. Fact you can play around with the pre built ones. Um, but yeah, the spring is pretty cool. Is in and out are pretty common. Um, again, you have complete control with, uh, with this here. So if you know your coordinates, here, you can do some cool effects. So that's pretty much the gist of the lesson. Um, in the following video, I'm going to just show you some cool exporting techniques on how you can get this into an animated GIF, uh, and even set it up in a way where you can post it up for dribble or something. 7. Exporting: All right. Um, some ways now, how we can export are animation. So a couple of really cool things in principle is that it has a way for you to export it. Wait, wait. If you click on the video icon here and you can see how you want to export this, do you want it to be a touch cursor? Which means it's that circle and arrow cursor, which is just the cursor you see here. Or you can hide the cursor completely. Um, for us, it's gonna be a touch cursor because this is a nap. My quick on this you notice starts rotating here and now it's recording my action. So you don't notice. I do. This boom on the video does this. Then I click back on the video and it won't ask me to save this. I could save it as a movie file. Ah, or a gift. Um, so if I click on, let's do a gift, and you could set the size. So I'm just gonna call this, uh, same thing. Always app it save. Give it a minute. One thing about gifts is that they could take up and get him out of space. They could easily, uh, jump to 50 things or so, if not more depends on the file size. How much colors are in there? Um, and also the quality usually goes down. So if you are planning on posting this as a dribble shot or something, you might need Teoh. Um, take this into photo shop washing. We went to say this as a daughter movie. First import that into photo shop from their play around with your settings. When you're saving for Web, um, until you find the sweet spot where it's out of decent file size as well as that still looks good. But here's our gift right now, so let's so let's just have an idea of how big this is. So this was 15 megabytes Hope. Not bad, but it's still, uh, pretty big. So it saved at 100 size, which is meant for for a dribble shot. Really usually 800 by 600 is the recognize plate, and you notice here it saves on grocer movements, and we did so pretty cool. Um, the gift also has has a bit of a harsh drop shadow here, So if you are planning on saving it as a gift and showing it in a presentation or a dribble Shots. I don't really recommend it just because it comes off with Ah, and got a pretty harsh drop shadow. And you don't have any room to maybe put a background and or something like that. So again, I would recommend saving it as he don't mammals e file And then from there, importing it even into after effects, if you want and had some little cool effects to it, Like putting it into a full one or something. And then from there, exporting it can, as I will be filed that importing it into photo shop. And then from there you've been exported as a gift. Um, if you have any questions, feel free to leave any any questions in the comments, and I'll do my best to get back to you. Uh, that's pretty much it for the course. So I hope you guys enjoyed it. I hope you learned something. Um, again, Feel free to ask me any questions here to help. Thanks very much.