Animation may be used in a wide range of scales and contexts to unite beauty and function.
Icon types
System icons may perform dual functions.
Product icons should demonstrate polish.
Icons
System icons
An icon may serve dual functions. For example, a menu icon may smoothly transition to a playback control, and back again. This effect both informs the user of the button's function while adding an element of wonder to the interaction.
Transforming the menu icon into the back arrow signifies that the two actions are connected, and that one cannot exist while the other is present. The back button must be pressed in order to return to the top-level view with the menu icon.
Transforming the play button to a pause button signifies that the two actions are linked, and that pressing one makes the other one visible.
When pressing this floating action button, the plus sign transforms into a pencil. This indicates that the pencil is the primary creation method.
Product icons
Animated product icons should demonstrate polish and refinement from the moment the app launches.
The Inbox product icon animation displays when the user opens the app for the first time and is asked to sign in.
The Calendar product icon animation displays when the user’s calendar data is loaded for the first time.
The Photos product icon animation displays when the user opens the app for the first time and enters the warm welcome.
The Gmail product icon animation has a slightly more playful personality while still keeping a similar reveal, and is also displayed when the user opens the app for the first time and is asked to sign in.