”When animation is implemented into a design system, it's important to be consistent.”
”Keep animation consistent with your product. It's a physical system of laws.”
- Decelerate (ease-out) human interactions
- Accelerate (ease-in) system-initiated interactions
- Fades and color-changes look best with more linear, subtle curves
- Bounces increase animacy and add an air of "fun"
- Longer durations for large(r) movements
- Use ms as transition-duration standard unit value (internal engines use it)
- WikimediaUI Base – default transitions for use across our products
- OOUI implementation
Plan of action!
- Integrate best practices in Wikimedia Design Style Guide
- Evaluate animations/transitions currently in use in (web) products