2.2 Custom Animations

Now that we know how to transition between pages, let's go ahead and spice up our designs. I'm going to delete some of the changes that we did in the last section. You can simply do this by selecting the arrow to delete a transition between pages. And we're gonna now duplicate this art board by hitting cmd+D on the keyboard. These two art boards are exactly identical. You'll notice that if I show here on the layers panel, both of these art boards have exactly the same layers and layer names. A while back, I mentioned something about having unique layer names. In this case, let's just leave it as is. You'll see why. Next, I'm gonna change the way this screen looks like, so that this screen doesn't look so much identical to the first screen. Next, what we'd like to do is transition from the first screen to the second screen. Notice how I've kept the layer names the same but one style from the other circle is a little different to the first one. Now, let's say we want to animate it. We want to move this red circle up to the top and make it animate to that black circle there. What do we do? We don't actually have to do much. All we have to do is just set the tap functions, say from this circle to the other art board and this circle to the other screen. And because our layer names are the same, watch what happens when I click the circle. This is why it's incredibly important to have unique layer names in principle. This is because principle analyzes the difference between each of those layers in the art boards, and automatically animates between them. This is a bit like magic move keynote. All right so, here I'm adding a shape here. A rectangle here, a box. We can copy this and paste it into the other art board. As long as it's got the same name, we can give this different properties. Say for example a super weird angle and have principle animate between them without us having to do any extra work. Pretty neat. Now say, for example, I want to find Chu in our animation. Say, we want to change the way our black circle moves up the page, sort of like a spring. You can do that, if you select one of the arrows on top of the arc boards. The animation panel should jump up. I'm going to resize this. So, it's a little easier to see. The animation panel is basically just a timeline of how each of the layers will animate between each screen. So, this is from the first screen to the second. You'll see that there are two areas in the animation panel for the box, for the angle, the position on the screen, and the same for the circle. If you click these bars you can adjust the way it animates. These are the animation curves. If you select spring, you can set the spring to a different Bezier curve which allows you to animate it sort of like a spring. There's a few tuts+ tutorials out there on Bezier curves and motion design. I highly recommend you look at them, and they should be available in the links of the description of this video. So, watch as I change the transitions forward and backward. And you can see that our objects are animating with a spring like fashion because we've changed it to be like so. We can do the same for different elements. In fact, we can even stagger the way they animate. Say for example, we want the position of the x value to stagger or so we say. Animate a little slower than the y value or the other way around. We can do that just by dragging the timeline. Now, if I select the button here you can see that going from one screen to the other, the box that's supposed to tilt around and swirl and rotate in that weird angle is staggered because of the way we've adjusted our animation power. In fact, you can play around with the animation panel to create your own custom animations, to animate between pages, really useful for unique animations.