Motion – Carbon Design System

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

If you’re using carbon-components there’s no reason to install the motion package separately. See our get started guide to start building.

Get started
Usage
Resources

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

@carbon/motion supports standard, entrance, and exit easing curves in two motion modes: productive and expressive. You can access these curves using either Sass or JavaScript.

Sass

@carbon/motion exports a carbon--motion function and carbon--motion mixin that you can use to access the value of a motion curve or include that curve as the transition-timing-function for a selector. To use these helpers, you can do the following in your project:

@import '@carbon/motion/scss/motion.scss';

.my-custom-selector {
  // Supplies the standard easing curve, using the productive mode by default
  transition-timing-function: carbon--motion(standard);
}

.my-custom-selector-v2 {
  // Supplies the standard easing curve, but with the expressive mode, on the

Both the motion function and mixin support passing in the name of the motion curve and the mode you want to work in.

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:

// 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

Resources

IBM motion generator

Edit this page on GitHub

Motion: Choreography

Guidelines: Spacing