Animation communicates the results of any interaction, making it both visible and understandable.

Activity done

Show that the system is actively retrieving data or performing an operation.

On the top bar and on widgets;

On navigator buttons.


On realtime icons.

Slide, reveal, collapse and flip Done

Slide in/out elements, collapsible containers, flipping cards - there are several examples across the app, be sure to use consistent duration and easing attributes.

Check out animation utilities.

Raise on hover

Slide from top

Collapse to the right

Slide from top or right

Flip card