Motion
Design tokens for animation durations and easing functions
Motion
Motion tokens provide consistent timing and easing for animations and transitions throughout your interface.
Duration Scale
Easing Functions
Animation Guidelines
Duration Recommendations
Performance-First Approach
faster (100ms) - Micro-interactions like hover states
fast (200ms) - UI feedback and simple transitions
medium (300ms) - Standard component animations
slow (1000ms) - Loading states and complex sequences
slower (2000ms) - Page transitions and major changes
Easing Characteristics
standard - Natural, balanced motion for most UI elements
accelerate - Elements leaving the screen or hiding
decelerate - Elements entering the screen or appearing
Usage Examples
Interactive Button States
Button Hover Animation
Loading State
Usage
In CSS
/* Smooth hover transitions */
.button {
transition: all var(--token-durations-fast) var(--token-easings-standard);
}
/* Loading animations */
.loading {
transition: opacity var(--token-durations-medium) var(--token-easings-decelerate);
}
/* Exit animations */
.exit {
transition: transform var(--token-durations-fast) var(--token-easings-accelerate);
}In JavaScript/TypeScript
import { tokens } from '@vibrant-ui/tokens';
// Create easing CSS value
const easingCSS = `cubic-bezier(${tokens.easings.standard.join(', ')})`;
const animationStyle = {
transition: `all ${tokens.durations.fast}ms ${easingCSS}`,
};
// Programmatic animations
element.animate([{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }], {
duration: tokens.durations.medium,
easing: `cubic-bezier(${tokens.easings.decelerate.join(', ')})`,
});With Vibrant UI Components
import { Button, Card } from '@vibrant-ui/components';
// Components automatically use motion tokens
<Button
variant="solid"
// Built-in hover and focus animations
>
Animated Button
</Button>
<Card
variant="floating"
// Smooth elevation changes
>
Animated Card
</Card>Best Practices
Accessibility Considerations
Respect prefers-reduced-motion settings and provide alternatives for users sensitive to motion.
Performance Tips
Last updated on