Why

• To give more cohesiveness to the UI elements.
• To help focus on specific elements and details.
• To provide feedback.
• To add delight.
• Brand cohesiveness.

When

• Between states (i.e. default and hover button).
• Between views (i.e. navigating to a different page).
• On temporary elements that come into view (i.e. toast, tooltips).

How

• Intuitive and expected motion.
• Non-disruptive.
• Intentional

Anatomy of Motion

Similarly with other components, with motion we can also create tokens and other basic attributes that build up interactions.

The scale goes as follows:

• Duration
• Easing