Motion

Use motion to reduce cognitive load and add moments of delight

• Design Best Practices
• Choosing Motion
• Easing
• Duration

Design Best Practices

Do

Avoid

Don't

CSS Triggers (opens in a new tab)

Not sure where to add motion?

Learn about all the CSS properties that you can add motion to.

CSS Triggers

Choosing Motion

1

How positive is the action, and how often does it occur?

When deciding what motion to use, consider the repetitiveness and positivity of the event or action taking place.

2

Which motion group does it fall into?

Once you’ve thought about the positivity and repetitiveness scale, it will fall into one of these motion groups. In the next step you’ll see suggested motion for each of these groups.

3

Suggested motion

Some suggestions based on which group your motion falls into.

Elegant

Create quick and smooth transitions by using the cubic easing with faster durations.

Fun

Create more expression by using the back easing. Due to the spring curve, cubic easing may work better in some situations. Try different durations to see what works best.

Thoughtful

If a user's action triggers a negative response, don't use any motion. Being sincere and direct is the best approach.

Bold

Let your creativity shine! Design a unique motion to surprise and delight the user. Keep accessibility and Benevity’s voice in mind. And make sure to ask your peers for feedback.

Easing

Enter

Use these ease-out options when elements enter the view.

get-easing($type: cubic, $direction: enter)See example

get-easing($type: back, $direction: enter)See example

Leave

Use these ease-in options when elements leave the view.

get-easing($type: cubic, $direction: leave)See example

get-easing($type: back, $direction: leave)See example

Transition

Use these ease-in-out options when elements move from one place to another, or transition from one state to another. For example, a color or opacity transition.

get-easing($type: cubic, $direction: transition)See example

get-easing($type: back, $direction: transition)See example

Linear

Used for changing between two states that doesn’t require an easing curve. For example, from one color to another.

get-easing($type: linear)

Duration

Short Duration

Examples include delays, hover states, opacity transitions, color transitions and small movements.

Long Duration

Examples include large panels and elements that travel a large distance.

Example of typography styles commonly used in Skyline.

Example	Values	Code
Short	120 ms	get-duration($value: 100)
Short	168 ms	get-duration($value: 200)
Short	235 ms	get-duration($value: 300)
Short, Long	329 ms	get-duration($value: 400)
Long	460 ms	get-duration($value: 500)