Skip to main contentCarbon Design System


The Carbon motion package empowers consistent cadence and movement of elements across digital experiences.

If you’re using @carbon/react, you probably don’t need need to install the motion package separately. See our Carbon React guide to start building.

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


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);
// Alternatively
transition: opacity motion.motion(standard, productive);
// Or use a duration


@mixin motionMixin
@function motionMixin


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:

// CommonJS
const { easings, motion } = require('@carbon/motion');

You can also include this as a JavaScript module:

// ESM
import { easings, motion } from '@carbon/motion';
motion('standard', 'productive'); // Returns a string `cubic-bezier()` function


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.

$prefixThe prefix that is used in selectors, CSS Custom Properties, etc.'cds'