A “grid of time” creates consistent rhythm. Animation is defined as multiples of a base grid.
Utilizing the Z-axis to support spatial organization aids in creating a visual hierarchy we refer to as “atmosphere”.
Attributes are animated over time to create a vocabulary of effects.
Type of Animation
Enter & Exit
The appearance or disappearance of an object on the screen.
Drawing attention to an object that is already on the screen.
Informing the user that a context change is taking place.
Personality & Branding
Characteristics or sequences of engaging animation that create surprise and delight.
Objects in the physical world have mass, thus they speed up from a standstill and slow down to a stop. When choose easing:
use ease-in-out for moving point to point
use ease-out for entering elements
use ease-in for exiting elements
use linear for opacity or color changes
The object being moved or animated should abide by these guiding principles:
subtle motion is preferred
short timing makes the interface brisk
avoid strong flashing or large motion as it can lead to user discomfort
Elevation suggests a conceptual hierarchy that makes use of box shadows to indicate visual hierarchy. The actual Z-index is up to the developer to maintain the correct shadows.
Atmosphere is the virtual space in front and behind the screen. The plane of the screen has an X,Y coordinate system with 0,0 in the top left. However, the Z elevation is the imaginary normal pointed at the user, -Z descent is beyond the plane of the screen.
Note: the Z axis is not the same as the CSS Z-index (which is a DOM element stacking order). The Z-indexes should be set as to maintain the sense of Z being towards the user.
The elevation of an object in the atmosphere is visually rendered as box shadows. The amount of elevation is not the same as the Z-index, rather its relative elevation which aids in rendering the shadow.
To implement the shadows in code there are Design Tokens you can include in the CSS box-shadow attribute.
Timings are a set of duration values. Values are calculated as even multiples of 100ms, which is 6 frames at 60 frames-per-second (3 frames at 30 frames-per-second).