Principle App: Drivers vs. Animations

Recently my talented friend Natalie Kwee sent over some of her illustrations for me to bring some motion into. I'm using it as an exercise to test drive some key features of the Principle prototyping tool. 

For this animation, I'm switching between a drivers based movement and an animation based movement. The "driver" in this scenario would be the X or Y positioning of the screen-- so as you drag your finger across the screen, the elements on the page would manipulate. 

Drivers

The key to keeping all of these elements nice and clean is to put forth the time properly naming and ordering the layers first. I keep elements that should stay together in a group. 

You can see as I pull my screen back and forth that a couple things are happening at different rates: the X and Y positioning of elements, the angle of the shapes. To get that organic, parallax effect, I time the positioning of these elements independently of one another. Since our character should be closer in our picture plane than the cloud, she moves a bit faster. The hat moves with her head but lags and tips a little bit. As she moves into the screen, her hand must stay attached to the balloon string.  

The way Principle deals with drivers is similar to keyframes in any video editing software. You choose a point along the X-axis and drop a marker to indicate some state of change. If between two markers I had a shape rotating 45 degrees, the rotation would occur evenly along the length of the chord between the two markers. 

Animations

Animations occur when you have identical layers that change states on different artboards. In this case, Nat's expression is changing as soon as her glasses appear. The order of state changes here is important. First, the glasses bounce in. Her squint recedes, and a smile appears as she relaxes her brow.

I hope future releases of Principle allow a bit more flexibility in the manipulation of shapes and vectors. But for now, it's a pretty fast and satisfying way to bring a little life into simple illustrations.