Motion
Animation and motion design principles for Ontopix products. Foundation guidelines for purposeful, accessible motion.
Experimental
Motion in Ontopix products serves function over decoration. This domain establishes core principles with detailed component-level specifications planned for future expansion.
Principles
Timing
| Duration | Value | Tailwind | Use Case |
|---|---|---|---|
| Instant | 0ms | duration-0 | State changes with no transition |
| Fast | 75ms | duration-75 | Micro-interactions, hover states |
| Normal | 150ms | duration-150 | Most transitions, button feedback |
| Moderate | 300ms | duration-300 | Panel slides, modal entry |
| Slow | 500ms | duration-500 | Complex animations, page transitions |
Easing Curves
| Curve | Value | Tailwind | Use Case |
|---|---|---|---|
| Ease Out | cubic-bezier(0, 0, 0.2, 1) | ease-out | Elements entering (most common) |
| Ease In | cubic-bezier(0.4, 0, 1, 1) | ease-in | Elements exiting |
| Ease In Out | cubic-bezier(0.4, 0, 0.2, 1) | ease-in-out | Elements moving on screen |
| Linear | linear | ease-linear | Color/opacity changes, progress bars |
Common Patterns
Hover feedback
<button class="transition-colors duration-150 ease-out hover:bg-primary-500">
Click me
</button>
Modal entry
<div class="transition-all duration-300 ease-out opacity-0 scale-95
data-[open]:opacity-100 data-[open]:scale-100">
Modal content
</div>
Reduced Motion
Always respect user preferences. Tailwind provides motion-safe: and motion-reduce: variants:
<!-- Only animate when user allows motion -->
<div class="motion-safe:transition-all motion-safe:duration-300
motion-reduce:transition-none">
Accessible animation
</div>