Foundation

Motion

The illusion of speed

Perceived performance matters as much as actual performance. A faster-spinning loader makes an interface feel quicker, even when load times are identical.

Both spinners below run for the same duration. The faster rotation creates a stronger sense of responsiveness — a simple trick we use across Svenska Spel products.

Easings — the main ingredient

Easing defines how a value changes over time. It is the single most important factor in whether an animation feels polished or broken. The wrong curve can make a good interaction feel sluggish; the right one makes it feel instant.

In our design system, easing directly influences perceived speed. Choosing the correct curve is often more impactful than adjusting duration.

Ease-in vs ease-out

Both dropdowns below use the same 300ms duration. The left uses ease-in and feels noticeably slower. The right uses ease-out and feels responsive immediately.

If every animation in your product used ease-in, the entire interface would feel slower than it actually is. Below we cover each easing type and when to apply it.

Ease-out

Our default curve for user-initiated interactions. Ease-out starts fast and decelerates, giving immediate visual feedback when a user opens a dropdown, modal, or tooltip.

Use this for most enter and exit animations across Svenska Spel products. It communicates responsiveness — the interface reacts the moment the user acts.

Ease-in-out

Accelerates then decelerates — like a car pulling away and coming to a stop. Use this for elements already visible on screen that need to move to a new position or morph into a different shape. Common cases include reordering lists and layout shifts.

Ease-in

The opposite of ease-out: starts slowly and accelerates. This makes interactions feel unresponsive because the user sees no immediate reaction. Avoid it for UI transitions.

Reducing the duration does not fix the problem. The curve shape itself works against user expectation — our brains expect motion to settle at the end, not accelerate into it.

Ease-out vs ease-in

Compare the two curves. The steeper start of ease-out is what delivers that feeling of immediacy we want throughout our products.

In short: ease-in makes the UI feel slow. Default to ease-out.

Linear

Constant speed with no acceleration or deceleration. This feels mechanical and unnatural for UI transitions. Reserve linear exclusively for continuous animations such as loading spinners and marquees.

Ease

Similar to ease-in-out but asymmetrical — it starts faster and settles more gently. We use this primarily for hover states and subtle property transitions such as colour, background-colour, and opacity.

For small, non-spatial state changes, ease provides an elegant feel without drawing attention away from the content.

Custom easings

When built-in CSS easings are not expressive enough, use these custom cubic-bezier curves by Benjamin De Cock. They provide stronger acceleration profiles for more dramatic transitions.

Variable names reference the mathematical functions that define them. Higher-order functions (quad, cubic, quart, quint, expo) produce increasingly pronounced easing effects.