Motion
Preset values for applying consistent motion to componentsCedar 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
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
- 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
- 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. | |
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
| cdr-timing-function-ease-out | |
|---|---|
| Value: Specifies a transition effect that will feel responsive. This timing effect moves quickly at the beginning with a slow end. Use this animation when users expect an immediate response to their action such as clicking on an accordion or button. | |
| cdr-timing-function-ease | |
|---|---|
| Value: Specifies a transition effect that is known as ease-in-out. This timing function can be quite satisfying for users because it has a slow start, a fast middle, and a slow end. Use this effect when users do not expect motion to occur. A suitable duration is 300-500ms for this timing function. | |
| cdr-timing-function-linear | |
|---|---|
| Value: Specifies a transition effect with the same speed from start to end. Be cautious using this effect because objects in the real world don’t usually move with a linear motion. Best for things like opacity fades. | |
Comparison of timing tokens
| cdr-timing-function-ease-out |
| cdr-timing-function-ease |
| cdr-timing-function-linear |
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