Join Tom Green for an in-depth discussion in this video Overview of Driver Channel, part of UX Design Tools: Principle.
- [Voiceover] To this point in the course most of the animation we've had has occurred with layers and changing between art boards. In actual fact you can also put some interesting animations into play by just simply using a layer and a single art board, and this is all made possible through the use of a driver. And let's take a look at how all that works. Now to apply a driver, what you do is you click on the Driver button right up here, and you can see that there's nothing there, and the reason is, as I said, drivers can be used with layers that are draggable and scrollable, or use properties that don't animate, so if I select the goose, and come over here and set it to draggable, you'll notice that the timeline lights up, now drivers work sort of like a common animation timeline that you're used to, but instead of time, the units that you see on this Timeline are based on the layers' next position.
And that next position is based on the center of the layer, right there. So if I move this over to zero, watch what happens to this center point of the image, so if I go over to zero, you notice that the center point is right up against the left edge of the art board, let's just move that back, and we can see that it's draggable, cos in the preview I can move it across. So let's try something a little bit different here. Let's have it fade out as we drag it to the right and fade out as we drag it to the left.
Now to accomplish this you need to use a key frame. And the key frames in principle, especially in the drivers are right here, this is how you add a key frame, you'll notice that the goose layer has a blue icon here, and if I click that, I can now say "okay fine, "I want to add an opacity key frame". And you can see that there's a key frame here, it's blue, and this little red icon here or this little red key frame, says I can delete the key frame, so let's just slide the goose off to the edge of the page we'll just take it right off the edge of the page, and we're gonna fade it out.
And we're gonna do that by just basically coming up to the Opacity property, cos that's what we're working with here, and we'll set the Opacity to zero. And if I come back, you can see the opacity there and you notice that as I move across inside the driver channel, nothing is happening in the preview, but if I click the preview, see it starts to fade. So let's go the other way, so we'll just come across, we'll get the goose off to the edge here, right about there, and we'll change the Opacity of the goose layer to zero.
And if we come back to the zero point, and drag you can see there's that fade. So that's kind of how a driver works, now the cool thing about working with drivers is that you can add all kinds of changes, I can change the Y position, the width position, so these are all tweens, I can change the height, the scale, the angle, the radius and the stroke width, and these are all properties in here that you can use. Now what happens if you say "okay fine, I want to "get rid of a key frame".
What you do is you put the Play head, that's this little bar here right over the key frame, and click the red key frame and that key frame is gone. If I want to add it back just click it, and change the property. And if you want to change the property at a key frame, like the opacity, I want it to be a little bit brighter, okay fine let's take it up to 30 percent, and if I come back to the art board, and put the Play head at the zero point, you'll notice I got the fade but it doesn't totally fade out here to the extent that it does on that side.
You can also add key frames in the middle, so if you want to add an opacity key frame, so you can add it right there, and have the opacity change a little bit more, or a little bit less. And if you wanna get rid of that key frame, you just click the red key frame and that gets rid of it. So there you go, there's the basics of working with a driver channel, you Apply Drivers to a layer, and you must set the layer as draggable, scrollable, or even page, and you can just simply add the key frames by clicking on the blue icon right here to add a key frame, so if I come across, you'll notice that the blue icon appears because there's no, I'm not over a key frame, I can add one.
Well there's a lot you can do with it and we're gonna have some fun with it in the subsequent videos in this chapter.
- Adding content to new artboards
- Creating your first Principle animation
- Managing the Principle timeline
- Animating with keyframes and drivers
- Using assets from Photoshop and Sketch
- Manipulating content properties
- Modifying keyframes and retiming
- Masking and cropping
- Creating transitions
- Develop an Apple Watch alert
- Create a ripple effect
- Animate button presses