Motion Tokens for Animation

Motion tokens for animation establish systematic values for timing, easing, and duration that create consistent motion across applications. While visual tokens like colors receive significant attention, motion tokens often remain undefined, leading to inconsistent animation feel. Proper motion tokenization enables cohesive, purposeful animation that supports user experience rather than distracting from it.

What Are Motion Tokens

Motion tokens are design tokens that capture animation and transition properties. This includes durations (how long animations take), easing functions (how animations accelerate and decelerate), and potentially delay values and spring physics parameters for certain implementation contexts.

Motion tokens abstract animation timing decisions into reusable values that can be applied consistently and evolved systematically. Rather than each component defining its own animation timing, all components draw from a shared motion vocabulary.

How Motion Tokens Work

Motion token systems typically define duration scales and easing curves as foundational elements.

Duration tokens establish timing values, often following a scale pattern:

{
  "motion": {
    "duration": {
      "instant": { "value": "100ms" },
      "fast": { "value": "200ms" },
      "normal": { "value": "300ms" },
      "slow": { "value": "500ms" },
      "slower": { "value": "800ms" }
    }
  }
}

Easing tokens define acceleration curves:

{
  "motion": {
    "easing": {
      "standard": { "value": "cubic-bezier(0.4, 0.0, 0.2, 1)" },
      "accelerate": { "value": "cubic-bezier(0.4, 0.0, 1, 1)" },
      "decelerate": { "value": "cubic-bezier(0.0, 0.0, 0.2, 1)" },
      "sharp": { "value": "cubic-bezier(0.4, 0.0, 0.6, 1)" }
    }
  }
}

Composite motion tokens can combine duration and easing for specific use cases:

{
  "motion": {
    "transition": {
      "expand": {
        "value": "300ms cubic-bezier(0.0, 0.0, 0.2, 1)"
      },
      "collapse": {
        "value": "200ms cubic-bezier(0.4, 0.0, 1, 1)"
      }
    }
  }
}

Application in CSS:

.dialog {
  transition: opacity var(--motion-duration-normal) var(--motion-easing-standard),
              transform var(--motion-duration-normal) var(--motion-easing-decelerate);
}

Key Considerations

• Motion tokens should support the emotional intent of interactions
• Durations should scale appropriately for different contexts
• Easing curves should match the physical metaphor of the motion
• Reduced motion preferences must be respected via prefers-reduced-motion
• Cross-platform consistency requires understanding of platform capabilities
• Spring physics cannot be directly expressed in CSS but suit native platforms
• Performance implications exist for complex or long animations
• Motion design expertise should inform token definition

Common Questions

How should reduced motion be handled?

Accessibility requires respecting users who prefer reduced motion. Token systems should support this preference.

CSS media query approach:

.animated-element {
  transition: transform var(--motion-duration-normal) var(--motion-easing-standard);
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
  }
}

Token-based approach provides reduced-motion token variants:

{
  "motion": {
    "duration": {
      "normal": {
        "value": "300ms",
        "reducedMotion": "0ms"
      }
    }
  }
}

Build processes can generate alternative token sets for reduced motion contexts.

Component-level handling applies reduced motion logic within components:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const duration = prefersReducedMotion ? 0 : tokens.motion.duration.normal;

The key principle: motion should not be required to understand interface changes. Users with reduced motion preferences should receive all the same information without the animation.

How do easing curves affect motion feel?

Easing curves determine the personality of motion. Different curves suit different interaction contexts.

Standard curves (ease-in-out variations) suit most UI transitions. They feel natural, accelerating from rest and decelerating to rest.

Accelerate curves (ease-in) suit elements leaving the viewport. They start slowly and speed up as the element exits, mimicking natural departure.

Decelerate curves (ease-out) suit elements entering the viewport. They arrive quickly and settle gently, drawing attention without harshness.

Sharp or linear curves suit certain emphasis effects. Linear motion feels mechanical but can be appropriate for progress indicators or deterministic animations.

Elastic or bouncy curves add playfulness but should be used sparingly. Overuse creates a toy-like feel that may not suit all products.

Token systems should include curves for common contexts and provide guidance on when each applies.

How should motion tokens differ across platforms?

Web, iOS, and Android have different animation capabilities and conventions.

CSS transitions and animations support cubic-bezier easing, which tokens can express directly. Spring physics require JavaScript animation libraries.

iOS UIKit and SwiftUI support spring animations natively. Tokens might express spring parameters:

{
  "motion": {
    "spring": {
      "default": {
        "value": {
          "mass": 1,
          "stiffness": 100,
          "damping": 10
        }
      }
    }
  }
}

Android Compose supports similar spring physics.

Cross-platform consistency may mean approximating springs with bezier curves on web while using native springs on mobile. Or it may mean using bezier curves everywhere for maximum consistency.

The choice depends on whether platform-native feel or cross-platform consistency is prioritized for the specific product context.

Summary

Motion tokens systematize animation timing to create consistent motion feel across applications. Duration scales and easing curves form the foundation, with composite tokens combining these for specific use cases. Reduced motion support is essential for accessibility. Understanding easing curves helps apply appropriate motion to different interaction contexts. Cross-platform considerations may require platform-specific token variants or approximations to balance consistency with platform capabilities.