7onicDESIGN SYSTEM

Easing

Controls the rate of change of animations. Choosing the right easing function makes your UI feel natural and responsive.

Easing Functions

Five fundamental easing functions

ease-linear

cubic-bezier(0, 0, 1, 1)

Constant speed, no acceleration or deceleration

Usage: Progress bars, loading animations

ease

cubic-bezier(0.25, 0.1, 0.25, 1)

Starts slow, speeds up, then slows down

Usage: General-purpose transitions (default)

ease-in

cubic-bezier(0.42, 0, 1, 1)

Starts slow, ends fast

Usage: Elements leaving the screen

ease-out

cubic-bezier(0, 0, 0.58, 1)

Starts fast, ends slow

Usage: Elements entering the screen

ease-in-out

cubic-bezier(0.42, 0, 0.58, 1)

Starts slow, ends slow

Usage: State toggles, sliders

Interactive Demo

Each box moves with a different easing (same duration).

linear
ease
ease-in
ease-out
ease-in-out

Component Demo

Experience the easing difference in real UI components

Dropdown

ease-out + 200ms

Option 1
Option 2
Option 3

Modal

Open: ease-out / Close: ease-in

Toast

ease-out + 300ms

Use Cases

Recommended easing functions for common UI patterns

Hover Effectease-out

Quick response, smooth finish

Modal Openease-out

Entering the screen

Modal Closeease-in

Leaving the screen

Sliderease-in-out

Smooth bidirectional motion

Loadinglinear

Constant-speed progress

Page Transitionease-in-out

Natural speed variation

Best Practices

✓

Do

  • ✓Use ease-out for enter animations
  • ✓Use ease-in for exit animations
  • ✓Use ease-in-out for state toggles
  • ✓Use ease-out for hover effects
✕

Don't

  • ✗Use ease-in for enter animations
  • ✗Use ease-out for exit animations
  • ✗Use linear for everything
  • ✗Overuse complex cubic-bezier values