”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 (ease-in-out) 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)
- Consider using will-change to rely on GPU over CPU for smoother transitions and opacity changes
For Codex a dismissable feature for user-facing system messages was defined with an auto-dismissing fade-out feature of 4000ms.
- 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