Motion

This section offers guidance on the core motion principles of our brand and how to roll them out over a variety of assets. By following this we create a unique and cohesive look across all moving assets that connects to our great brand image.

Motion Principles

The three guiding principles of our motion language align to strengthen our brand vision. All motion revolves around these core ideas.

Click

Snapback

Click

For text and hero animations we use a snap motion, defined by steep easings and frame jumps that reflect the mechanics of a key press.

This behavior utilizes hold keyframes to create sharp hits that easing cannot achieve. When applying make sure to leave a 2 frame jump between keyframes to ensure the stagger stays consistent.

This should take place over 12 frames or less: 2 for the intro frame, maximum 10 for the sharp easing. This is in the context of 30fps.

Click

Example

Hold Keyframe / 100% out
(0, 0, 0, 1)

Follow

We use the Follow motion behavior for bigger movements such as transitions or when layering multiple animations.

The Follow behavior also features a hold key frame–in the middle–to cut between preceding and following motions.

This should take place over maximum 22 frames and include 1 frame skip in the middle. This is in the context of 30fps.

Example

100% in / Keyframe Jump / 100% out
(1,1,0,1) + (0,0,0,1)

Snapback

The Snapback principle mimics the return movement of a key press to give objects weight and signify the end of the motion.

This motion behavior uses a subtle overshoot, then a held keyframe, and a final snapback to it’s resting point. This is a 2 frame hold to allow for it to settle and click back into place.

This should never be longer than 20 frames to keep the final movement as a snap and not a bounce. This is in the context of 30fps.

Snapback

Example

100% in / Keyframe Jump / 100% out / Keyframe Jump
(1,1,0,1) + (0,0,0,1)

Logo Animations

The symbol and lockup animations utilize a combination of the behaviors above.

Primary lockup

Symbol

Type Animations

Type animations utilize the Click behavior. While headlines animate word-by-word, body copy should animate paragraph by paragraph. When animating two or more lines of text there is a subtle horizontal movement to emulate tabulating mechanics.

Headlines

Body copy

Video Toolkit

Transitions

We use these transitions to wipe screens or swap between content at a scale. We should use vertical motion by default, but where needed we can opt for right-to-left motion.

The above transitions can also be applied to more complex layouts.

Lower Thirds

When introducing people or suppling the viewers with additional information in videos we use these lower thirds. The logo animation on the right is optional.

Intro/Outro Cards

The logo animations can also be used to start or end longer videos.

Intro card

Outro card

Cursor Animations

Our bespoke cursor animations can be used to show interactions both on desktop and mobile.

Desktop

The desktop cursor animation follows a combination of our principles. The position movement uses the easings set in the Follow behavior, while the rotation animates with a Snapback movement. On click, the cursor scales down with a slight overshoot and changes color to Stack Orange for roughly 10 frames.

Mobile

The mobile cursor animation uses slightly smoother easings than the desktop cursor (70%-100%, rather than 100%-100%). Similarly to the desktop cursor, it changes color on click (to off-black) and on hold/drag (to Stack Orange). In addition to this color change, when dragging content the mobile cursor animates with a simple smear over the duration of the position movement.