Motion
The Carbon motion package empowers consistent cadence and movement of elements across digital experiences.
Get started
To install @carbon/motion in your project, you will need to run the following
command using npm:
npm install -S @carbon/motion
If you prefer Yarn, use the following command instead:
yarn add @carbon/motion
Usage
The @carbon/motion package enables you to access motion curves and durations
built for the IBM Design Language in Sass. You can access these values directly
from the package by writing the following:
@use '@carbon/motion';.selector {// Set `transition-timing-function` directly@include motion.motion(standard, productive);// Alternativelytransition: opacity motion.motion(standard, productive);
API
| Name | Type | | :---------------------- | :------- | | `$duration-fast-01` | Duration | | `$duration-fast-02` | Duration | | `$duration-moderate-01` | Duration | | `$duration-moderate-02` | Duration | | `$duration-slow-01` | Duration | | `$duration-slow-02` | Duration | | `$easings` | Map | | `@mixin motion` | Mixin | | `@function motion` | Mixin |
JavaScript
If you’re using @carbon/motion as a JavaScript dependency, we export our
easings and a function called motion that you can use. For example:
// CommonJSconst { easings, motion } = require('@carbon/motion');
You can also include this as a JavaScript module:
// ESMimport { easings, motion } from '@carbon/motion';motion('standard', 'productive'); // Returns a string `cubic-bezier()` function
Configuration
You can configure parts of the @carbon/motion package with Sass Modules. For
example, you can change the $prefix used by writing the following:
@use '@carbon/motion' with ($prefix: 'custom-prefix');
For a full list of options that you can configure, check out the table below.
| Option | Description | Default |
|---|---|---|
$prefix | The prefix that is used in selectors, CSS Custom Properties, etc. | 'cds' |