Motion

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.

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:

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

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:

You can also include this as a JavaScript module:

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

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'`

Usage

API

JavaScript

Configuration

Resources

IBM motion generator