mi6
Motion and Animation
Summary
Enhance motion and animation across all components to provide better experience through subtle visual cues. Componentize as style so they can be used on custom components
💰 User value
Describe why this is important and how it will help users (either developers, designers or the end-users). Think about how it makes people's lives easier, more accessible or quicker to build stuff.
📚 User Stories
If relevant, describe the high-level functionality as user stories.
As an ICDS user: I need So that
📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Given When Then
✏ Designs
If there's a Figma design file (or other mock-up), include it here.
## 🧾 Guidance If there's written guidance or documentation, include it here.
During recent work on v3 it was noticed that motion between states across all components was inconsistent. We need a consistent approach to moving between: Default => Hover. => Pressed => Visited/Clicked. Proposed is that 100ms, Smart animation, Ease in and out is used by default, with the transition to visited/clicked set to 300ms to implement a more naturalistic feel when interacting with components.
Unlike colour and typography, there is no ability in Figma to apply variable tokens to motion/animation and as such, there's no way to Componentize the motion/animation style. At best we could categorise interactions;
- major = the motion takes place over a large area such as the expanding of a drawer or accordion
- minor = the motion is at a detailed level, such as hovering over or clicking a button or checkbox
We should then agree on recommended settings for both