Motion

Motion

Key Principles

  • Timing Image
    Timing

    A “grid of time” creates consistent rhythm. Animation is defined as multiples of a base grid.
  • Elevation Image
    Elevation

    Utilizing the Z-axis to support spatial organization aids in creating a visual hierarchy we refer to as “atmosphere”.
  • Effects Image
    Effects

    Attributes are animated over time to create a vocabulary of effects.

Type of Animation

  • Enter then Exit Image
    Enter & Exit

    The appearance or disappearance of an object on the screen.
  • Emphasis Image
    Emphasis

    Drawing attention to an object that is already on the screen.
  • Transitional Image
    Transitional

    Informing the user that a context change is taking place.
  • Personality and Branding Image
    Personality & Branding

    Characteristics or sequences of engaging animation that create surprise and delight.

Physical Mass

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

Other Considerations

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

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.

Elevation Perspective Image
15
10
5
GROUND
-5
-302416

To implement the shadows in code there are Design Tokens you can include in the CSS box-shadow attribute.

Timing

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).

To use the timing tokens see the timing section.

Named Animations

This is a vocabulary of animations. Click to run individual demos:

  • Abc
    fade out, fade in

    opacity change
  • Abc
    color

    color transition
  • Abc
    grow

    scale increase
  • Abc
    shrink

    scale decrease
  • Abc
    fall, rise

    Scaling, elevation, opacity
  • Abc
    lower

    scale decrease, elevation
  • Abc
    raise

    scale increase, elevation
  • Abc
    pop

    scaling, elevation
  • Abc
    punch

    scaling, elevation
  • Abc
    shake

    horizontal translation
  • Abc
    jiggle

    vertical translation
  • Abc
    slide

    translation, opacity
  • Abc
    flip

    Y-axis rotate
  • Abc
    roll

    X-axis rotate
  • Abc
    spin

    full rotation
  • Abc
    tilt

    slight X-axis rotation
  • Abc
    twist

    slight rotation