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:
Motion tokens are primarily used with web applications. Motion tokens for mobile devices are not currently available.
Usage: Perceived as instant or very fast. Often used for selection controls such as radio buttons, checkboxes, or toggle buttons.
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.
Usage: Perceived as normal. Often used for revealing content, such as the opening of a panel for the accordion component.
Usage: Perceived as slow. Often used for revealing content on a tablet device because the screen is bigger than a phone or wearable device.
Usage: Perceived as slower. Often used for icons with detailed animation, such as a ringing alarm clock or opening and closing a lock icon.
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 easings are 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.
Value: cubic-bezier(0.32, 0.94, 0.60, 1)|
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.
Value: cubic-bezier(0.15, 0, 0.15, 0)|
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.
Value: cubic-bezier(0, 0, 1, 1)|
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.
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.
Use the transition pattern when:
|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.
View Accordion component.
|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.
View Tabs component.
Use the supplements pattern when:
There are currently no components in the Cedar Design System that use supplemental animation. Common examples of this type of animation are:
Use the feedback pattern when:
|When user hovers on or off, color changes instantaneously. |
View Button component.
|When users hovers on or off, an underline style is applied to the link text. |
View Breadcrumb component.
Use the demonstrations pattern when:
There are currently no animations on the REI site that are demonstrations. An example of this type of animation is when a group of files emerge from the downloads icon on the Mac dock interface.
Use the decorations pattern when:
There are no animations on the REI site that are decorative. For examples of decorative animations, view 15 Latest and Best Loading Animations to Make User Enjoy Waiting (opens new window).
CSS animation frame rate for interface elements is dependent on the speed of the browser and computer:
For smooth and responsive animation, use CSS attributes for:
translate(), to reposition an element in the horizontal or vertical directions
scale(), to resize an element on 2D plane
rotate(), to rotate an element on x, y, or z axis
skew(), to distort an element on the 2D plane
For more information, visit Adding Tokens to the Repository.
|animation||An illusion of movement created by displaying a series of pictures or frames.|
|aspect ratio|| |
The relationship between the width of an image to its height. Standard ratios are 16:9 for widescreen and 4:3 for television.
|Bézier curve||A method of defining curved lines invented by French mathematician Pierre Bézier. For animation, a Bézier curve can be used to specify the velocity over time of an object such as an icon moving from A to B. Bézier curves are often used to replicate the physics found in the natural world. For the animation function, cubic-bezier (p1, p2, p3, p4), the p1 and p3 values must be in the range of 0 to 1.|
|cross dissolve||A transition effect used to fade one image into a different image simultaneously: one fades in while the other fades out.|
Specifies a gradual acceleration in the action with a slow start and quick ending. Ease-in is not recommended because it may negatively impact the user's perception of your site's responsiveness by feeling sluggish at the start. A common value for the cubic-bezier is (0.25, 0.1, 0.25, 1.0). Also known as slow-in.
Specifies a gradual acceleration at the start until the middle of the action. Then, a gradual deceleration in the action at the end. This timing function can be quite satisfying for users because it has a slow start, a fast middle, and a slow end. Do not use this timing function for a long animation duration because of the sluggishness of the ease-in start. A suitable duration is 300-500ms for this timing function. Cedar’s token
Specifies a gradual deceleration in the action with a fast start and slow ending. Ease-out is recommended because it gives the animation a feeling of responsiveness. It also allows a natural slowdown at the end. A common value for the cubic-bezier is (0, 0, 0.58, 1.0). Also known as slow-out. Cedar’s token
|fade in||Specifies a transition effect used to open a sequence. The first image gradually appears from complete transparency to its complete opacity.|
|fade out||Specifies a transition effect used to close a sequence. The last image gradually disappears, going from complete opacity to complete transparency.|
|frame rate||The frame rate is measured by the number of frames recorded or played back each second. It is denoted as fps (frames per second). For example, an animation could be played back at 12, 15, 24, 25, 30 or 60 frames per second or any other number.|
Specifies an even speed in the action. A common value for the cubic-bezier is (0.0, 0.0, 1.0, 1.0). This is commonly used for opacity transitions. Cedar’s token
|path of action||Specifies direction that the action will follow.|
|slow-in||Specifies a gradual acceleration in the action with a slow start and a quick ending. Also known as ease-in.|
|slow-out||Specifies a gradual deceleration in the action with a fast start and a slow ending. Also known as ease-out.|
|timeline||A horizontal representation of a scene's elements, timing, and keyframes.|
|transition||An effect that happens between two images or scenes. Common transition effects are cross-dissolve and wipe.|