Skip to content
Branch: master
Find file History
joshblack v10.5.0 (#3703)
* chore(release): update package versions

* chore(project): bump internal dependency version
Latest commit 8471623 Aug 12, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs chore(project): add elements packages May 8, 2019
scss chore(project): add elements packages May 8, 2019
src chore(project): add elements packages May 8, 2019
.npmignore chore(project): add elements packages May 8, 2019 feat(cli): add @carbon/cli package (#2982) Jun 10, 2019


Motion helpers for digital and software products using the Carbon Design System

Getting 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


@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.


@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
  // transition-timing-function property for this selector
  @include carbon--motion(standard, expressive);

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


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

📖 API Documentation

If you're looking for @carbon/motion API documentation, check out:

🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀

📝 License

Licensed under the Apache 2.0 License.

You can’t perform that action at this time.