Transcripts
1. Welcome to the class!: Hi and Bettina. I'm lead designer, based in Vancouver, ER. I work with user experience and user interface design for Web applications, and I also do motion graphics for explainer videos. In this culture class, I'll be teaching you how to create animations for user interface and sign and these courses for you. I designers with little or no background in motion graphics. We'll start by talking about the principles of animation and best practices for interaction , design and for the class project will be animating a landing page in principle for Mac. You will need a Mac for this class, and by the end of this course, you'll be able to create a landing page with animations, which is vertical and horizontal. Scrolling effects overstates transitions and lips. Just like this, you'll be able to apply motion sign to any interphase you're working on for both Web and mobile. Let's begin
2. Learning objectives: Hi and welcome back to the motion graphics for you. I design class in this video, I'm going to explain the learning objectives. This class is divided into two sections. First, we'll talk about the future of animation and what makes good animation. Then we'll take the fury into practice and animate a landing page. By the end of this class, you'll be able to understand the principles of animation and how you can use those for motion in you I design. You will learn how to use the principal apt to create vertical and horizontal scrolling effects to prototype over effects and interactions, to work with multiple screens to create transitions and had to export and share your prototype. For the class project, you'll be provided with a template of a landing page created with fig MMA. So let's begin.
3. Understanding animation: Okay, now let's begin by understanding. Animation in this section will talk about the principles of animation and how we can translate some of those principles into motion. You I design The 12 Principles of Animation were introduced by Disney animators all the Johnston and Frank Thomas in their book The Evolution of Life. This pretty much is the Bible of any Judy and three D animator out there now. There are a lot of resource is online about this topic, but today I will be showing you the examples shown in these website The 12 Principles of Animation that tumbler dot com. Let's quickly review, which are these principles? Number one, Squatch and Stretch. This principle aims to emphasize the speed and weight oven element. Number two Anticipation. This is to prepare the audience for inaction. It's a movement that starts before the main animation happens. Number three Staging. This is a presentation of an object in a way that is clear. This allows the audience to focus on the object and avoid destruction. This is most handing in user interface. When you think about the entrance of an animation, is it happening in the middle of the screen? or does it star before the object appears on the screen? Either way is important that you make sure the user understands what's going on. Number four straight ahead and posted post the's air two different approaches of animation straight ahead. Scenes are animated frame by frame, whereas post oppose scenes, start with the key poses and then goes back to feeling the frames in between. This will come more useful when animating illustrations or icons number five follow through and overlapping action. This is, in a way. The opposite of anticipation is the animation that happens after the main action. Um, this principle aims to follow the loss of physics to make objects look more natural, as if they have a sense of weight or volume. Number six slowing and slow out thes argue easing, and he's out, and you will be using this principle a lot. In motion design and digital animation. The ease in can be easily adjusted with a busier curve, and we'll go over and more detailed ones with start animating with principle number seven arcs. So the most natural movements follow a curve motion animating without curves will usually look unnatural and less fluid so arc skin come in handy, went animating scrolls or swept for simple sweeping through cars Left and right. Number eight. Secondary action. A secondary action usually emphasizes the main action. In the case of you, I these could be useful, went animating sliders or programs, bars or any other component that will make the main interaction more clear. Number nine Timing in animation This principle refers to the number of frames or drawings between the start and end of inaction. More frames was low. The action endless frames will make it look fast. But in terms of user interphase, um, speed becomes more important when talking about micro and micro animations. Number 10 Exaggeration. This enhances the action but making it more apparent and avoids animations to look dull. So, for instance, things can be useful when providing feedback to the user in a public window for assembled for and I come like a notification bell. Number 11 silly drawings in animation. Solar Germans means to add volume and weight to the objects in the scene, giving the scene a three dimensional space. So in you, I we can interpret this as the amount of elevation a component has and how to clearly show the hierarchy of elements and number 12 appeal, making something look interesting and with character. This will be your motion style. This, in a way, is a combination between the constrains in motion design and the personality of the brand you're working with.
4. Principles of animation recap: So now that we're familiar with principles of animation, let's quickly do a recap off which principles can be applied to interaction design so squash and stretch can be applied to I cones and illustrations. Staging can be applied to interface assigned to clearly show an object in the screen. Follow through. An overlapping action can be used when animating multiple components, and also four I comes and illustrations slowing and slow out can be very useful to smooth your animations. And this is probably the principle that you will be using The most arcs is good for icons and illustrations and perhaps some types of interaction designs that you can animate that you can create some curves with. Timing is an interesting one, because usually when you do, when you think about animation, you'll be thinking about frames. However, when it comes to motion designed for user interface, you're gonna be thinking about how long is an animation in milliseconds, and we'll talk about in more detail in a later video and lastly appeal. So this is your style and the personality over your animations. So now let's move on to the next video, where I'll be talking about the key things and constrains that are specific to motion you. I design
5. The illusion of a user interface: now you're familiar with the 12th principles of animation. Let's talk about the principles of motion designed for you. I in the following videos I'll go over the key things to keep in mind when animating a user interface. Let's talk about the principles of motion design for you. I This differ from the 12 principles of animation in that these airmen for interactivity and really they are the most important things to consider. First, your animations should be efficient. They must not sacrifice performance. In a world where the attention span of people is getting shorter and shorter, you must ensure that your animations don't take a lot of time to load on the screen. Second, your animations must be intuitive. They must look natural. They must feel familiar and expected and should be back by the laws of nature. You know, they should be marrying things like wade acceleration, volume, etcetera. And last but not least, your animations must not be a distraction. The amount of motion should be just enough to be meaningful and justified, and their sole purpose is to get the intention across and nothing else. Now it was good to the next video world. Talk about the A deal duration oven animation in you
6. Duration: when animating for you, I will be talking about milliseconds as opposed to frames. And according to these research study by a Nelson normal group, anything below 100 milliseconds won't be visible enough for the user. And anything longer than 500 milliseconds will take too long and my cost boredom or destruction. So with this in mind, I generally like to stay between 100 and 500 milliseconds, like so in motion. Yeah, you can think of two types of animation micro and macro animation, so anything between 100 milliseconds and 300 milliseconds can be considered a micro animation. This could be color fades over effects, Accordions, tool tips, etcetera and anything from 400 milliseconds onwards will be. Consider a macro animation. This can be a Siris of components within a section and mating altogether, or a transition from a page to another page or just generally, any large movement on the screen. Here's an example off the different duration that will be using today. I've animated this squares to move from side to side with the different types of duration, and this should give you an idea of micro and macro animations like you can see here. Now let's move to the easing effects
7. Easing: easing is another important aspect of motion design. This is yours lowing and slow ABT, and it changes the speed oven animation over time. This makes an object look more natural, as in the physical world, objects accelerate and decelerate another several times of easing. But for the sake of this class will be using the three most common easing types ese aimed. He's out and he's in and out. You can adjust the values to increase in the crazy amount of using, depending on the effect you're looking for. But principle by default uses the default easing style for IOS. But I recommend you try different values and see how that affects the feeling off your animation.
8. Working file: All right. So now we look at some fury. It's time to start enemy. I know. Finally. Right. So for this class have created a filing Sigma, which you'll need to follow along now, Principal is also compatible with sketch. So if you're more familiar with it, feel free to use your own design and just apply what we'll be doing in principle. Okay, so let's quickly take a look at a working file, and I want to mention a few things are very important when designing motion in principle. First, make sure your layers air clearly organized. I recommend organizing your layers from top to bottom following the position on yours on your design. So, for example, your navigation bar would be at the top and your foot. It would be the bottom, so the navigation layer would be at the top of the list and the footer layer would be at the bottom of the list. And this will make things a lot easier when animating in principle. And second is very important to name your layers correctly. If not animating a file that has a lot of layers can get really messy very quickly, and it would be very hard to update your file in the future. So ensure all the layers have a clear name and that are organized by groups or sections because principal duplicates of the lay years that will be animated. So you wouldn't want to be working with names like Lay your Want or 350 you know? So make sure you name them intuitively, and that is clear for you. What complaining you're working with. Okay, great. So now let's move to the next video where we'll go over the principal interface and then we'll importer file.
9. Principle: Import our file: in this video, we're gonna take the principles of animation that we just talked about, and we're gonna put them into practice. So let's start by getting familiar with the principle interface. First on the left, we have our layer properties and we have our layers and on the right, we have our preview window and here will be able to play around with our prototype. And we're also gonna be able to see our animations playing in real time as we edit and change the valleys and properties of animations as well. So in principle, there are two types of timeline the drivers and the animate, which you can do go on and off does like this. So animations happen between art boards and they air triggered by events such as top or click or hover inside and outside. And drivers are technically not classified as animations. In principle, um, they happen within and our board, and they're more like scrolling effects or drag a ble. Laters. So to start, I like to separate my preview window just like this, and I like to have it on the side because otherwise he's kind of in the way of Thea art boards. And so I'm just gonna move my window like this. So this way we can focus and work on the our boards here and see what's happening real time over here. Now let's go ahead and import are fig my file. Let's click the import button and will the asked to connect to our female account. So let's go ahead and do that. This will open a new window in your browser, and you need to allow axes to principle. So we'll click that. And in order to make sure that were important the right project. Let's go back to Fig MMA, and these can be done both in the desktop app or the browser app. So let's select the frame we want to important and go back to principle, and we're gonna click the import selected frames. Okay, so now we're ready to start animating
10. Principle: Page scroll: Okay, so here is our page, and the first thing I want to do is I want to change the view port size. So in order to do that, let's go to size presets and select Window the stop and web. So as you can see here, a preview window has been updated accordingly. And now let's take a look at our file structure for a second. So all over sections or group individually and their hidden. And if you want to see them or access in yield elements inside, all you have to do is check the quick clip sub layers here, so we'll live them hidden for now. We'll come back to these later state. Now, this bitch is not really doing anything at all the moment. So I want to make sure we can do is scroll vertical scroll here. So to do that, we need to change the vertical settings here to scroll instead of static. So let's group all over sections by pressing command G. And let's rename these group to squirrel window, and you can do this by pressing command are so now having our layers selected. Let's change the static setting, too. Scroll here now. Something interesting has happened here. Principal has created a driver here that specifies that scroll window has a driver off scroll on the Y axis. And if you drag these line year left on bride, you can see the scroll moving up and down. But let's come back to this later. And for now, let's bring these back to zero. So if you go to the preview window, actually, nothing is happening here and begin, try Dragon this But that's not Doesn't really want. So to fix this, the group needs to be the same size of our view for size. So let's, uh let's adjust settings here. So exchanging news here and then making the high nine pixels like of you poured. And so you go to the preview window, then you have a scalable page. Okay, so that was easy. Um, next video will animate. How are London? Page is going to look
11. Principle: Page load: Okay, So in this video, we're going to create a loading effect for the elements that are in the hero section. So what I want to do here is a very simple animation where these elements fading and floating from below in a cascade style, so kind of like one by one. So to do that, we're going to select our landing page here, and I'm going to rename it to in true Transition. Okay. And I'm going to click these little life thing Bull, icon and select auto, which basically means that our transitions air going to play automatically so we can see this little blue arrow here which, um, will be pointing to the next our board. But since we don't have any other are boars here will select the one that we already have so that it duplicates it like this. And as I mentioned before, the animate timeline works between our doors. So, as you can see here, the principal has created these arrow, and if you click on it, you can see the animate timeline out and how it has all of our layers here. And this is why it's important to have a good habit of naming your layers correctly because it will be very sad to see what things you're animating here and just basically, just what's going on here. So let's start by renaming being yard board to squirrel page. Now let's Creavy floating effect here. I'm going to select these elements and move them 30 pixels down, and you can do these by clicking shift and the down arrow key three times. So every time you click achieved in an arrow key will move. 10 picks halts into that direction. So if I purview these spy clicking this button here, it will take us to the first our board. And if you place your mouth anywhere on the preview screen, we can prove you are animations by default. Principal keeps you a duration off 300 milliseconds and uses three D fold easing style for us. Now I personally prefer ease. Both, Um, I think it makes animations just slightly smoother, but feel free to use whatever you prefer. Here I am going to change all of these to ease both, and I'm also going to select the navigation bar here and change all of these select elements to zero prison a pass team. So as you can see here, Principal has automatically created are animations. And if you move your mouse left and right over the timeline, you can preview your animation. So this way we can see the animations kind of coming along. And as I said, I want the elements to enter one by one. So I'm going to be dragging thes and separating them by 100 milliseconds each. Okay, so it looks like this. It's looking quite nice and smooth. I think we can get away with, um, maybe extending the animation of the position just a little bit to give it kind of like a sons of the elements being but dragged in a bit. Okay, So I'm going to select these ones here and extend them for another 100 milliseconds, I guess. Let's see how it looks now. Okay, some happen with this. Let's move to the next video. Where will animate how these cars will enter the screen? Well, scrolling down the page
12. Principle: Hover effects: right. So here we are again and what's just clean this up a little bit. So what I want to do now is I want to animate this cards, and I want the cards to have a Khobar effect. And I also want to create a scrolling effect so that when we're scrolling down, the carts appear in a nice, gonna flowy way. So to do that, we're going to create a new art for, and I'm going to select here. Scroll begins, and I'm going to duplicate it again. And then I'm going to running this scroll effects. All right, so let's, um unclip are are set layers here. Just I want to see what's going on. And this is where we're going to start using our drivers here. Now, before we start animating these cards, I want to create the Khobar effects. To do that, I'm going to make a component. So let's select one of her cards here, and let's go to these button here that says create component. And then I'm going to click here and select over insight going to duplicate this and then when you over outside is going to go back to the beginning. We've created a loop here right now. Nothing's really happening because we haven't changed anything. I'm going to change my art horse named here June active. And then here I want the car to 10 pixels up. And I also want have a shadow here. So I'm going to use the same shadow that we really have to find here. Uh, just for the sake of the exercise, Uh, let's go here to 16 year a in 4% zero aimed in our all funds for Okay. So I also want to learn more to have a line here, that kind of abuse from left to right. And if we go back to her file here, you'll notice that I've already prepared a lot. These components for you. If you go to the learn more component, you'll see that would have an active and a over group already. And because when you import a file to principal every ill a year and group that it's hidden , it's not going to be important here, and it would have done it's that have made the over states transparent. So here, let's change our capacity from 0 to 200 and then let's put the active state to syrup percent and I was You can see here we have a line here now. What I wanted to is a one thes lines to be drawn from left to right. Okay, so let's go to our active state. And then let's change the line here in the Khobar State, 20 with. So if we could go and preview that now it's working. So let's just close its up. Let's go back to parent. So now what I want to do is I want to duplicate this and so that we have three cars that are doing the same thing. So first I'm going to rename it Card one, and then I'm going duplicated twenties but pressing command deep. And then I'm just going to make sure that they're a line. According to the original cards, I'm just electing cards and aligning them, and now we can go ahead and meet our previous cards, and we preview this you can see there are over effect is now working nicely, right? So that's it for these video. In the next one, we're going to create a scrolling effect for three cards
13. Principle: Scroll effects (part 1): Okay, so now let's agree this growing effect here for our cards. Now, this is where we're gonna use our drivers and what I wanted to you. It's that when the cards reached this position in the screen, you look exactly like this. We're going to select our hearts and then we're going to these little plus symbol and select center. Why? And create Cree Frenk and I also want them to fade in. So I'm going to select capacities well down. Let's go back to zero, which is where our animation begins and I'm going to move them 100 pixels down. This time of one is to be a bit more drastic than the 30 pixels. And then I'm going to separate them as well by 100 pixels each, like so so ever Prevue. This what was scrolling down? You can see the effect now coming along. This is great, nice and smooth. Let's make sure we add our fading as well. So let's change what's selling them all again and change the capacity to zero. So let's Proview's okay, that Yeah, so let's do it from the beginning. Okay? And or homer effects are still working. That's great. Now let's go into the next video where we're going to animate the next section
14. Principle: Scroll effects (Part 2a): So here we are again and let's move on to the next section and we're going to do something very similar here. In fact, we're gonna do pretty much the same for every section. They're just gonna be a little bit different in some small details. But pretty much the gist of the animations and the style of the animations are going to be the same. Now, we're gonna do the same here by turning these into components. And the reason why we're doing the components first is because we are going to create some interactions for thes page. But in order to Korea, those interactions we're gonna have to create the our boards and every time would duplicate on our board e copies over every component and every poor pretty you have. If we duplicate in art war without creating components, then we're gonna have to do our work twice. So to get that out of the way, we're just gonna do it now. Now let's begin with this one. So let's go with a great component. And as I said, I've already created this states for you was active and over that this one will need another state which is going to be the select at ST now. First I want to see what's going on, because when I was too dark, so I'm just gonna create a background for this white background. So I'm just gonna press are for a rectangle, and then I'm just going to create a very, you know, just just for the sake of seeing what's going on, just gonna change this to White, and then I'm gonna move it over here. Case now I can see. Now let's change the name here too active, and then let's create our over effect and then our return over outside and I'm gonna change these two over, and I'm going to duplicate this present command D and remove that proves in direction. I want to pass, elated because I don't want to accidentally move to different states when I don't mean to. So there's gonna be changed use like, Okay, now let's go here. And then we're going to show our active state, which is a pastis 100% that's good. And our Khobar, it's 0%. But I actually want these two look like are selected state, because if you look at the design. This is how the selected state looks like in the Saudi active steak. Looks like so was changed. This to be actually Dube gonna change are lying to zero, and then I'm gonna change you. Pass it here too. 60%. And then here, I'm going to. But the whole 100% you're active 0%. And then again, I want these line to be drawn from left. Right, So I'm gonna change it here 20 and I'm gonna leave these one as it is so weak over over now we can see we have perfect. Great. So let's go back to the parent. And here, as you can see, it has changed the way it looks, But we can go here and change from active to select. Now we've got this exactly like we design it. Now we're going to do the same thing for these component. Let's just rename this 1st 201 step and then floods create component for this. Going to create a rectangle here to see too long change it to white. Moving to the back changed these two active state. But I'm going to duplicate his twice. And then these one's gonna be over. This was gonna be selected. Then the holder fact gonna change this 200%. He's 1 to 0% and we're going to do the same first elected state. So 100% and 0%. And then our active state is a very the weight you look. So let's make sure we're connecting. The art bores here and then for about spine. And now it works. And don't forget when you do this, Linus. Well, so we'll go back to over here, change our line. 20 What? And networks? Great. So let's go back to our parent. And then lives were named this 202 step, and then we preview this. This is working.
15. Principle: Scroll effects (Part 2b): So now let's create our scrolling effects for this. So I want these two look pretty similar. I wand the text to slide up and fade in, and I'm going to still like them here also with this ones. And I'm going to create a driver here, a key frame here and Sandra why? And also for passage. Now let's go back to where previous animation finished and we're going to move these 100 pixels. I'm going to press shift and down anarchy 10 times and then I'm gonna separate them by 50 pixels each. I just don't want it to be too crazy with 100% cells each because otherwise it's gonna take a long time to load. Right? So we prevue. It's now he looks very smooth. I like it. Now let's select them all and change the rapacity. 20 We can see here. That's nice. We'll do the same. Except this time would use the center X for this. So let's go here and we're gonna click on Centre X and capacity. Let's go back here and then let's movement 100 pixels and change capacity to zero. So we review our information here. This is coming along together. Very nice. All right, so that's it for this section. In the next video, we'll do something very similar for the next section. And then we go, sir, Greetings or more complex interactions.
16. Principle: Scroll effects (part 3): All right, so here we are with this section. Now, let's go to our drivers here and put these in the right position. So again, when the section reaches thesis point, I wanted to look like that. Now, here we're just going to adjust our cards because there's three cars that we have here are just placeholders. The rial cards are in here, and we're gonna use principle, but to make sure that they're in the right position. So I'm just going to delete these ones here, and I'm gonna change this to 200%. And I'm gonna change the scale here to 0.9 in thes 12 0.8. And the reason why the older ones where a placeholder is because the text is different. And I wanted to use the scaling property here because later I'm gonna show you how we're gonna create an interaction to flip through these cards. Okay, so let's make sure they're aligned to the bottom off the first card, and then I'm going to move them 20 pixels down each and just let you see how they look. There just have different text. Of course, this is Demi text but I just want them to look different. So now that we got that out of way, it's close this and let's just see how we're gonna do this next section. So again I won the tags to fading and sliding, and I want to animate this background to uncover the cars and then, in one thes two hours to animate as well. It's gonna encounter each other from left and right. So let's begin with the text. I'm going to select this and I'm going to create a key frame. I think Here's fine for Sandra Y and opacity. Let's go back to where our previous animation ended and let's greet our key frames here. So let's go down again by 100 pixels. I just want to make sure that everything is consistent and use. The same is basing here, So let's separate these words by 50 pixels as well. Oops. Okay, let's preview this Moran. That's quite smooth. Now let's at our fade in effect by changing the capacity to zero. So we go here Now we see them a meeting. All right, so let's move on to these parts. So here I'm going to create a key frame four center X and with something with them like that. And let's review here, So okay, I think here I want the background to finish just a little bit earlier. So to do that, I'm going to make this bigger here and going to move his round. So I think I want end. Let's just see. So I want to end right about their thing. That would be the A d on. So let's see here. Yes, so we can see the cards better now? Yes. Now let's animate these two hours here. So again, I'm going to create a key from one center X, and then I want them to scale up a little bit. I'm gonna add a skill que frame and then a past two key free. Now let's go back to the start of the animation, and then I'm going to of the 20 pixels each to the site. And then I'm gonna change the scale to 0.8 and there are passages your so let's see how this looks. Okay, so I want them Teoh to finish just right right before the text. Us? Well, and I don't want them to start after early, either because he looks cannot ought that they're just floating there. And I want them to be closer to the line to the animation of the back room here. So let's go by here. Change thes to a little bit earlier scope, probably around there, just a little bit more. And then I want them to finish just a little bit earlier as well. Maybe maybe around there. Let's see you. Okay, I think we just want to make sure that we cannot telling the user that you know these air buttons and you can click through here, and I want them to figure that right away. So I think this is working for now. So in the next video, we'll finish the scrolling effects, and then we'll moving to creating some more complex interactions for cards and our horse until scrawling effects.
17. Principle: Scroll effects (part 4): All right. So let's move on to the next section here and just want to see more of this. So we're gonna do this'll just the way we've been doing. The previous sections were going to actually, we're going to group this cards command G, and I'm gonna change this to test. Just feels it is my cards. And let's like this, too. I'm gonna addict frame for center. Why? And keep frame has a team. And over here with the end of our province innovation here going Teoh fixes that. That's a brave man. Um, 15. Let's take a look. Yeah, I don't want these actually to be too much because I want these so that when we scroll down , these cars are actually moving automatically scrolling sideways. So I don't want these to become a distraction And to be too much going on here, So live it like that. And then Alice just put everything to zero positive. Okay? Does nice. OK, so now let's move on to thes section here with a lot goes and these one is gonna be really similar again. We're just going to make sure we get those right. So let's elect our logos here and these components. And then let's click on center wine and then opacity. Let's go back here. Move these 100 pixels down. Okay, then for the my 50. And we'll do the same with these button here. And I also want them to look like cascade styles. Appear one by one. And we can do this in a different way as well. So it was just at our past t here just to have this key frames done. Then we can select our logos here and then just move the key frames. So let's leave the ABC Lobel like that. And in these one, we're going to just move them. But like that, then the next one. I'm just doing these by I. But, I mean, if you really want to be really specific, you can you consume in here and then just literally being as pixel perfect as you want to be, I suppose. And then lastly, swoon kiss was lost. Repeat that. Yeah, this looks like Yeah, I think I think probably this is too much less just a little bit less here. Just like that Lucy again. Case of this more So So I'm OK. with that. And then I just want make sure that the food or is not in the way so you can see here cannot to clothes to food earn away. So let's just move this as well. It's just, um, create key from here for center Why? And let's go to beginning. And with that 100 pixels down, and I think we can make it so that it starts a lot later, maybe there, Yeah, that's it's nicer. Maybe even even rent. Yes. Okay, so there we have it. Let's preview from the beginning. They are scrolling effects or Khobar fights for cards. Testimonial cards are logo's in the foot booking greats we've done. We're done with our scrolling effects in the next videos. We are going to create more interesting attractions here and animations going to. I made the sections of that. We can click here and go to the next step, and then we're going to create an indirection years who can flip through our cars by clicking his arrow. And then we're just going to create automatic course until scrolling here, so that when we scroll down these air moving sideways and we can see them All right, great. So let's move on to the next videos
18. Principle: Interaction scroller (part 1): Okay, so here we are on the next section. Now what I wanted to hear is I want to una made thes button so that when we click on it, we can see the future Step number two coming in from the right. So let's a clean up here. Just clothes, the's folders and I'm going to clip my layers here. Now I'm going to go to I'm gonna go back to this section here, and what I want to do first is create my interaction. So let's click on these button and we're going to click on tap and duplicate our card. And the first thing to do would be to change thes states from active do, selected in these one from selected to act. And then let's create and tap to go back to previous page. So right now, nothing is really happening on. Sometimes things happens. Uh, one thing I do when this happens is I just do this right. So now nothing's really happening is you can see here, but let's start by creating our animation. So So let's unclip our soup later so we can see what's going on here. And this is the future step number two that who want any meat. So let's open our enemy timeline, and I'm gonna close the drivers timeline for a second. Now there's something I want to mention here. As you can see here, there are two icons, so the water has this three lines. It means that thes animation has been created in the driver's timeline, and the Wanda has thes snowflake means that the animation has been created in the animate timeline. Now, unfortunately, if you've changed a property and the drivers timeline, you can not change the same property in the animation timeline. So let's see an example here going to select thes layer here, which represents the animation of these image block coming in from the right, coming in and fading in from the right. So let's identify here. Now you can see here the Center X and a pastie are being controlled by the drivers and because we want to animate this section so that it moves from right to left, basically on the X axis. Technically, we can't do it because these is controlled by the drivers. But here's a little trick I like to do so. Thes property is only applied to the group, but not to the elements inside. So let's select the elements inside and every other element we're going to animate. So let's select all of these as well and also going to select the background because is going to help me align the elements properly. 30. Go. So if we see here now, Theo Enemy Timeline has created an animation for the Centre X property for both elements. So let's take a look at what we have. Here we go back museum features that one would click here with the features Step two.
19. Principle: Interaction scroller (part 2): now I think we can still make thes a little bit smoother, and I want to make it so that when we change to feature Step two, the animation off the components inside, it's like smoothing and smooth out. And I want them to leave the screen one by one and appear in the screen one by one similarly, to what we've been doing for the previous sections. So let's get to this now. Another thing I want to mention about the enemy timeline is that the's snow flakes that are in blue mean that you can not change the animation here. He's basically means that is a component. And if you want to change the animation, you have to change inside the component. So, for example, the's card number one is a component, so if I double click on it, I can see my timeline here, and I can change thesis well to any easing that want for extended as much as I want. But I'm just gonna leave it the way it was before, because I like the way it looks so far. So let's go back to the stuff. Another thing that is important to mention here is that all these layers, Basically almost every layer has an animation here, but it doesn't necessarily mean that is information that is useful for these art board. So in these gays were just concerned about thes elements on the screen. So we can technically select all of these animations and just delete them by clicking. You know, animation and nothing really changes here. So I know it can become a little bit messy here and these use because technically, every time we duplicated an onboard, every element that changed principal automatically creates an intimation here, even though if it's including the drivers or you know anything that we've changed here. So I know it could be You be confusing here, but let's try to clean this up as much as we can. So I've had these deluded now, and I'm going to start by animating the components I need. Uhm, I'm going to delete basically every everything that has the driver icon here so that I know that we don't need these ones. Okay, great. So let's start animating our components. We'll start with this one, and what I want to do do have some sort of appear one by want. I'm just going to separate them by 0.2 milliseconds each. So this would be six. So we can see here how it's looking, and this is what I want. Now the next thing I want to do is I wanna change the easing style teas. Okay. And then let's do the feature Step two. So that would be this one here, and I'm going to separate them again. My point, Z room Chew Mills Aiken speech. Okay. And we don't really care about background, so Okay. No, it's working. Now let's change Thies to ease out. And unless make each component toe last about 500 milliseconds here. So about the 0.50. Okay, And now let's adjust. This one's to start. Maybe around 0.20. There you go. So let's play this going back. And this is how our features Step two appears so it's quite nice. I like it. And the reason why make thes he's seen these ones ease out is because I'm looking at these as a whole. Automation. Basically, these is ah, whole transition, and I wanted to be easy in and out. So the first components are living the screen for an easy and the ones are arriving are basically and he's out. And as I mentioned in Fury section in terms of duration, because this there's a lot of components moving in the screen, you wanted to be 500 milliseconds or longer in total. So it's played again. Yeah, that's nice. Now I'm just gonna leave it like that. I'm gonna move on to the next section. But why don't you try doing the same thing for features Step one and basically what you'd have to do there is pretty much the same except in reverse and then see how you do it and posted in the project section.
20. Principle: Interaction cards: Okay, so let's do our next interaction here. And what I wanted to hear is an interaction that shows the cars flipping when I click this arm. So let's start by closing. Thes aren't force that we don't need. And I'm going to clip my layers here and I'm going Teoh, go to my drivers too. Find the position off the next section, like here and then I'm going to select my arrow and I'm going to click on tap and I'm going to duplicate and I'm going turn name this aren't board card be current And Okay, so the first thing I wanted to is I want to just my cards here, So I'm going to increase the size side, were here so I can see properly and I'm going to win my card A to the bottom. And then I'm going to change the scale of card beat 21 and I'm going to make sure that he's online to card a. Then I can change cars e to skill 9.9 and carte eight to scale 80.8. Now I can select the mall again. I'm going to align them to the top of card be and then again to the bottom off card beef. Then I'm going to select my two carts from underneath and move them by 20 pixels each. All right, The next thing I wanted to iss I want to change thes selectors here. So I'm going Teoh, copy these color. And this is just 3333 So change these two gray lark like Great! And these one, it's gonna be dark rain. And that's something we're gonna do with the hours. So these one, it's gonna hopes it's gonna go 33 and the other one's fine. So let's just see how this looks for enough come back to my previous art board and then I'm going to preview my animation. Okay, so not to you. Bad way can. Still we can't polish a little bit more. So what I want to do now is I want to create something between these two partners because it's still not clear that we're flipping through the cards. So bloods click another in traction here, going to select mind button and click tap. I'm going to duplicate this now I'm going to remove the previous tap I'd be before, and instead I'm going to create an auto transition. So basically, it means that when we click the arrow, it's going to go to these aren't bored. And when the animation here finishes is going to go to these aren't so here. When I want to do is when I select my card A and I'm going to move them 40 pixels up and 40 pixels to the left. But then I'm going to change the angle to minus two. Then I'm going to change my selectors here to be, um, 40 percent alpha in these 12 Then I'm going to select my card seat and change the A passage e 20 Now you find seem out. And if we go back to our previous art board and play this, it looks like this. Okay, so not too bad. But we can still polish it just a little bit more. And what I want to do here now is I just want to just the timing gonna close the drivers timing of these animations. So where were changing here? He's Court A and C and C selectors. So I'm just going Teoh, make sure that I'm not changing anything here, so I'm gonna remove that and also all of this, and I'm going to change all of this too easy that I'm going to go to the next to the next aren't board, and I'm going to do the same. Except I'm gonna change with these ones too. Please. Out. Okay, so let's review this. Yeah, not too bad. Great. So we can do the same for the next guard. What? Did you try to do that on your own and posted on the project section? So now let's move on to the next video. Where will be animating this stroller and this is gonna be a very, very simple animation. We're just gonna make it look so that the testimonials look that they're automatically scrolling to the left.
21. Principle: Auto scroller: So this is the last section we're going to animate. And before we get to that, I just want to quickly show you that I've completed the last car that we needed to animate . Now, if you had a chance to do that on your own, that's awesome. I just want to quickly show you what I've done here. So, first of all, I've renamed all my art words. So card be transitioned. This is the one we were working on in the past. Video card, be end. And then I've created two new art wars here. So current See transition and cart. See end. And if we see our animations here for card see transition. I've adjusted all of these to ease in and fork artsy and all of this one's to ease out so that they match the previous card. Okay, great. So let's move on now to the next section. Here we are going, Teoh, go to the driver's timeline and this one's gonna be very simple. Let's, uh, gold the way to the sea or testimonial carts. And I'm going to move thumb. Uh, 23 about three cards like this. Two cards, three cards. I love going to move them on June 3 cards like that and then going to my enemy timely and going to find line tissue nil section here, testimonial cards and this centre. Why is the one that we want to meet? So I'm gonna make it. I'm gonna extend it all the way to about 12 seconds, and I'm gonna change at the animation to Linear. So let's go back to the previous art board and still scrolling, and you can see the cards automatically scrolling there. Great. So let's play everything from the beginning. We have our loading effect scroll down and we have our cards. He also have a whole effect for our cards. And then we have a scroll, er here to our feature Step number two. And then we have nice scroll down section here and we can flip through our cards like so. And then we can't go down. Sarah, just money, ALS, and then see our clients and the food. That's it. Great. So let's move on to the next video where we're going to review what you've learned, and we're gonna go through how to save your file and export your file to dribble or a movie file, or even as a program for any developers or other designers, and you want them to play around with your prototype and get some feedback.
22. Conclusion: All right, congratulations on completing these class and creating your animated landing page. Let's go over what you've learned so far. First, you learn how to do simple animations to create a loading effect for these hero section. Then you learn how to use drivers to create vertical scrolling effects. Then how to work with components to create Khobar effects. You also learn how to use the animate timeline to create smooth animations and how to animate complex interactions. Using multiple are bores. Finally, you've created a very simple effect that looks like an infinite horse onto scholar. Awesome. So when you're ready to export your file, please reset your preview window and press control and the letter V for Victor, and it will start recording anything you do in the preview window. So go over everything you've created. And when you're done, click Control V again to stop the recording. Now you can export your file as a video file or a gift file, um, or progress, but honestly, actually have never used the last option. Another cool thing that you can do here is if you go to file and select explored Mac app. This will create an application file that can only be playing in the Mac, but you can share it with developers or designers that you're working with. So there you have it. Your porta type. It's like awesome. So this is my first class, and I would love to hear your feedback. And if you like, the class plays shared with a friend. Also, don't forget to submit your project to the gallery and leave your review. I would like to great more classes like these in animation, and you I And if you like to hear about them, click the Fuller but thank you.
Bettsina Walkinson, Senior Product Designer
