Motion

Preset values for applying consistent motion to components

Understanding motion

Cedar provides easy-to-use, preset values to apply consistent motion for components. Motion tokens help maintain a cohesive experience across all REI properties by:

  • Storing motion attributes for duration or timing using variable names, not hard-coded values such as cubic-bezier (0.15, 0, 0.15, 0)
  • Specifying a hierarchical and semantically-defined system

Usage

Cedar motion is purposefully designed to enhance the customer's understanding of REI’s digital products. Components use animated interface patterns to reduce cognitive load and imbue a natural interactivity. It’s an important part of building customer trust and affinity for our products.

When to use

  • Reducing cognitive load. For example, when a product image slides to reveal the next or previous product image after a user clicks on a directional arrow
  • Attracting the user’s attention. For example, when a toast message moves down from the top browser bar for region-specific warning messages
  • Providing context with transitions of a single object. For example, rotating an arrow icon to show an accordion panel opening and closing
  • Showing continuity through the system with transitions between objects. For example, using animation to reveal a modal window
  • Keeping users interested during loading or long processing times by providing delightful animations

When not to use

  • Adding the animation could waste the user’s time
  • Entertaining the user, rather than helping them to accomplish their goals ::

    • Accessibility

  • Do not cause the screen to flash more than three times a second
  • For any animation that starts automatically and plays for more than 5 seconds, provide pause controls. For example, auto-updating content and ambient videos

    • Duration

  • Animated components use short time durations so interactions feel responsive and brief
  • Recommended range for animated durations is from 100ms to 600ms
  • Striking a balance is key—slow enough to comprehend and fast enough to respect the customer’s time

    • From Nielsen Norman Group research:

  • 100ms is perceived as instant. Users feel that they are directly causing something to happen on the screen
  • Delays between 100ms and 1 second gives users the impression that the website is working and causing the result to appear
    • cdr-duration-1-x
    Value:
    Usage: Perceived as instant or very fast. Often used for selection controls such as radio buttons, checkboxes, or toggle buttons.
    cdr-duration-2-x
    Value:
    Usage: Perceived as fast. Often used for hover or fading effects or icons that change shape, such as switching between a play button and a pause button.
    cdr-duration-3-x
    Value:
    Usage: Perceived as normal. Often used for revealing content, such as the opening of a panel for the accordion component.
    cdr-duration-4-x
    Value:
    Usage: Perceived as slow. Often used for revealing content on a tablet device because the screen is bigger than a phone or wearable device.
    cdr-duration-5-x
    Value:
    Usage: Perceived as slower. Often used for icons with detailed animation, such as a ringing alarm clock or opening and closing a lock icon.
    cdr-duration-6-x
    Value:
    Usage: Perceived as very slow. Often used for larger movement, such as revealing page content when switching tabs for the tabs component.

    Timing

    Cedar’s collection of timing tokens includes easing functions based on physics found in the natural world:

  • They respond quickly when invoked and slow down over time to ease into their final position
  • This communicates a sense of physicality and reflects the customer's expectation of objects moving in the real world
  • Best used with any UI element that opens or closes, such as the accordion or modal components

    • Comparison of timing tokens

    Interface patterns

    Transitions

    Use the transition pattern when:

  • Moving users from one page to another page
  • Transition out of one task to another
  • Replacing large portions of information

    • Accordion

  • The arrow icon rotates using ease out timing with 300ms duration
  • When opening, the accordion content is revealed using the ease timing with 300ms duration
  • When closing, the duration changes to 200ms to hide content
  • When opening or closing, the panel content fades on and off using linear timing at 100ms

    • Tab

  • Ease out timing is used for updating the tab bar and revealing new content
  • Duration was initially set at 600ms. During the development phase, the duration was updated to 500ms

    • Feedback

    Use the feedback pattern when:

  • Giving users direct feedback about their interactions
  • Linking a human action to an interface's reaction
  • Keeping the user interested during slow page-loading times

    • Button

  • When user hovers on or off, color changes instantaneously

    • Breadcrumb

  • When users hovers on or off, an underline style is applied to the link text