Motion – Carbon Design System

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

If you’re using @carbon/react 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

Sass

The @carbon/type package enables you to use typography from the IBM Design Language, including the type scale and fonts, along with typography design tokens from the Carbon Design System. It also comes with opinionated defaults for type styles on common elements like h1, h2, p, etc.

You can use this package by writing the following:

@use '@carbon/type';

// Include type reset
@include type.reset();

// Include default type styles, targets h1, h2, h3, etc
@include type.default-type();

// Include utility classes for type-related properties

@use '@carbon/motion';

.selector {
  // Set `transition-timing-function` directly
  @include motion.motion(standard, productive);

  // Alternatively
  transition: 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:

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

Configuration

You can configure parts of the @carbon/type package with Sass Modules. For example, you can change the $prefix used by writing the following:

@use '@carbon/type' 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'`

Resources

IBM motion generator

Edit this page on GitHub

Motion: Choreography

Guidelines: Spacing