DesignSystems.One LogoDesignSystems.One

Motion

Motion system brings interfaces to life through purposeful, informative animations that guide users and create a more engaging experience.

Motion Principles
Core principles that guide approach to motion

Purposeful

Motion should serve a purpose, whether it's guiding attention, showing relationships, or providing feedback.

  • Transitioning between states
  • Indicating loading or progress
  • Revealing or hiding content

Natural

Animations should feel natural and follow the laws of physics, with appropriate easing, momentum, and weight.

  • Objects accelerate and decelerate
  • Heavier elements move slower than lighter ones
  • Movement follows expected physical behavior

Subtle

Motion should enhance the experience without calling attention to itself or becoming distracting.

  • Quick, efficient transitions
  • Appropriate scale of movement
  • Balanced timing and duration

Consistent

Similar actions should have similar animations, creating a predictable and cohesive experience.

  • Standardized transitions for common actions
  • Consistent timing and easing
  • Unified animation language across products
Duration & Easing
Standard timing and easing functions

Duration

  • Extra Short100ms
  • Short200ms
  • Medium300ms
  • Long500ms

Easing

  • Standardcubic-bezier(0.4, 0, 0.2, 1)

    Most transitions

  • Entercubic-bezier(0, 0, 0.2, 1)

    Elements entering the screen

  • Exitcubic-bezier(0.4, 0, 1, 1)

    Elements exiting the screen

  • Emphasizedcubic-bezier(0.2, 0, 0, 1)

    Attention-grabbing animations

Common Animation Patterns
Standardized animations for common interactions

Fade

Use for appearing/disappearing elements, modals, tooltips

Scale

Use for emphasis, buttons, interactive elements

Slide

Use for navigation, transitions between screens

Accessibility Considerations
Ensuring motion is accessible to all users

Respecting User Preferences

Always respect the user's motion preferences by checking for the prefers-reduced-motion media query and providing alternative animations or static transitions.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Avoiding Vestibular Disorders Triggers

  • Avoid large, fast-moving animations
  • Limit parallax effects and background movements
  • Provide controls to pause or stop animations
  • Keep animations contained to small areas of the screen

Alternative Cues

Don't rely solely on animation to convey information. Always provide alternative cues such as color changes, text labels, or icons.

Implementation Guidelines
How to implement motion in your interfaces

CSS Transitions

Use CSS transitions for simple state changes:

.button {
  background-color: var(--primary);
  transition: background-color 200ms var(--ease-standard);
}

.button:hover {
  background-color: var(--primary-dark);
}

CSS Animations

Use CSS animations for repeating or complex animations:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 300ms var(--ease-enter) forwards;
}