# Motion

Use motion to reduce cognitive load and add moments of delight

# 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.

# 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.
ExampleValuesCode
Short120 msget-duration($value: 100)
Short168 msget-duration($value: 200)
Short235 msget-duration($value: 300)
Short, Long329 msget-duration($value: 400)
Long460 msget-duration($value: 500)