- Overview
- Transcript
2.3 Drivers and Keyframes
Keyframes are essential in order to create truly unique motion designs. In this lesson, I’ll show you step by step how to use Principle’s Drivers panel to build interaction-based cues for designs.
1.Introduction2 lessons, 03:47
1.1Course Overview01:00
1.2Introduction to Principle02:47
2.Principle Basics3 lessons, 10:01
2.1Interactions and Transitions03:04
2.2Custom Animations04:08
2.3Drivers and Keyframes02:49
3.Prototyping Interfaces2 lessons, 14:54
3.1Images and Layout07:54
3.2From Static to Dynamic07:00
4.Conclusion1 lesson, 01:21
4.1Conclusion01:21
2.3 Drivers and Keyframes
Now that we know how to create custom animations, let's delve deeper into principle's drivers feature. This is really useful if you want to create custom interfaces. Right now I'm just editing the group that we created earlier setting back then, group to our original settings to a scrolling list of bars. Now see for example as I scroll this, I'd like a little position indicator to show where we are as we scroll. I'm gonna create this by creating a rectangle, adjusting the a pasty by change you could style a bit. Making it a little wider that way we can see it as we scroll. Now say for example. What I'd like is as I scroll, I'd like that little bar to go all the way down and reflect the position as we scroll our bars. We can do that using Principle's drivers feature. So if we select the drivers button up here we get the drivers panel. There's something interesting about the driver's panel. It looks very much like the animation's panel. But this time instead of time, unlike the animations panel what we get is the y position of the scrolling object. So as I drag the scroller. This that. The bars move according to its position across the screen. Scrolling up and down as we scroll. We can take advantage of this. And add some sort of key frames. Sort of key positions of where this bar is supposed to be at certain areas of the screen. Or in certain points of the scrolling bar. So what we can do is select our bar and hit the little key frame button here. In this case we want the Y position to be locked at the default position. Now watch as I adjust the scroll up the top, we want it to say when the scroller is at this position, we want the bar to be at the bottom of the screen. It's sort of like a queue I guess. So as you move it towards the bottom of the screen. There we go. We can see that as we scrub through the position timeline, well not really the timeline, the position panel, we can scroll up and down and see what it would look like if we scroll our content. And we can see that the gray bar moves along accordingly to the key frames. Interacting it with the preview panel, shows exactly this. Drivers allow us to cue specific events depending on the position of objects that we interact with on screen. This is really useful if say you want to create a timed event for example when scrolling, you want something to appear or when you drag something you want another thing to change or pass the scale or even appear or fly in from off screen.