Speed, Character & Emotion

Swiftness

Quantum is fast, as fast as possible but just slow enough to be seen and feel intentional. Movements should flow together and be precise, nimble, and swift. It accelerates quickly but comes to a smooth stop as it approaches its destination. There's no need for a bounce.

By the 50% time mark, the emo curve has already traveled 80% of the distance, whereas a standard in/out is at 50%. Objects on average will take ~500ms to travel the length of a screen (.297mph).

Accelerate the pace

Whitespace. Not giving enough time for animations is suffocating. If we really look at the problem we hate long animations because there are moments in our life we are in a hurry. Trying to dial 911 is different from browsing through photos of your family. Let's not slow people down while not ruining the impact we can have with animation. So let's move at the pace of a user.

Responsive Timing

Sequence A and sequence B are performing the same task at different paces. We stick a 500ms timer at the end of an animation to batch subsequent transitions. Depending at which point a user navigates further in an activity, we take that percentage of the timer and multiply it against the duration of the next transition. By doing this, Sequence A shaves 1 full second off of the task at hand and takes only 75% of the time sequence B (non-accelerated) needs.

Simplicity and Precision

Animations are as simple as possible, but rich enough to communicate; they are as precise as possible, but forgive error.

Imply Shape & form

Every shape has a story. Perfect squares are perfect, circles are round, rectangles are tall. Use these unique characteristics to your advantage.

Honest to the Matter

Objects are believable when they are honest in their transformations. It's important to maintain the essence of the material throughout the tween to build trust. Paper should feel like paper in the first frame and in its last frame.

Teamwork

Animations work for the user and bridge the gap between technology and human interaction. Objects spawn from user touch and follow through into the direction in which they expand and need to go.

Transformations

1. Be used with good Reason

   Animation should aid the overarching idea and have purpose. When an object undergoes a state change, there is a clear path to animate to. Otherwise there's no clear delineation of how to transition.

2. Maintain Mass

   Objects should maintain some resemblance to original mass during their tweens. Blurs and malformed shapes lead to insincere and uninspired animations. Maintain proper shape and avoid collapsing.

3. Follow Through

   Every action has a flow and direction. By properly staging a rotation or position change, we resolve the event with elegance. Otherwise things seem to fall apart.