Animation

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