Motion | ELFBAR Design System

MOTION

Motion enhances user experience by providing visual feedback and spatial awareness. Follow these principles to ensure consistent interactive experiences.

Design Principles

Purposeful — Motion serves function, not decoration. Every animation should convey information or guide attention
Responsive — Interaction feedback should be immediate; avoid making users wait
Natural — Use the laws of motion from the physical world; avoid linear or abrupt transitions

Transition Durations

Token	Duration	Usage
`duration-instant`	100ms	Toggle switches, button state changes
`duration-fast`	150ms	Hover effects, focus indicators, ripples
`duration-normal`	250ms	Expand/collapse, tab switching
`duration-slow`	350ms	Modal dialogs, page transitions
`duration-slower`	500ms	Complex layout animations, initial load

Easing Curves

Click each curve to preview the animation timing.

Standard

cubic-bezier(0.2, 0, 0, 1)Most UI transitions

Decelerate

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

Accelerate

cubic-bezier(0.3, 0, 1, 1)Elements leaving

Linear

linearProgress bars

Common Interaction Animations

Button

Hover: background color transition 150ms standard
Press: scale to 0.98 + ripple effect
Disabled: no animation, opacity reduced directly

Dialog

Open: scale in from center + backdrop fade in 250ms decelerate
Close: fade out 200ms accelerate

Tabs

Switch: underline slides 250ms standard
Content area: fade in 150ms

Expand / Collapse

Height transition: 250ms standard
Combined with rotating chevron icon: 150ms standard