Animation and Transition Basics#

Animation#

A composition of gradual changes over time that express a certain idea.

Animation makes use of time as a medium, when mere spatial expression is not enough.

In this design system, animation can be considered as a tool to refine an experience. Thus, animation is also an identity, where consistency or similarity is key.

Transition#

Transitions are animation works that emphasise on expressing state changes.

Transitions can provide context to help users construct mental models of a application.

In this design system, transitions are used to ease sudden changes. Longer, more complex transitions should strive for similarity to create a unified experience.

Notes#

• The design should not rely on animation to communicate. Avoid designing a change that is so harsh that it must rely on transition to communicate.
• Respect user setting that reduces motion. Design without animation and transition should still be effective.