# @carbon/motion > Motion helpers for digital and software products using the Carbon Design System Latest version **11.54.0** (published 2026-10-07) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @carbon/motion pnpm add @carbon/motion yarn add @carbon/motion bun add @carbon/motion ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 11.54.0 | | Published | 2026-10-07 | | First published | 2018-11-14 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 132.8 KB | | Known vulnerabilities | 0 | | Install scripts | yes | | Provenance | attested (GitHub Actions) | | GitHub stars | 9521 | | Maintainers | carbon-design-system, carbon-bot, leechase, jeffreychew, sstrubberg | | Keywords | ibm, elements, carbon, carbon-elements, carbon-design-system, components, react | ## Links - npm: https://www.npmjs.com/package/@carbon/motion - Repository: https://github.com/carbon-design-system/carbon - Homepage: https://github.com/carbon-design-system/carbon#readme - Issues: https://github.com/carbon-design-system/carbon/issues - npm.io page: https://npm.io/package/@carbon/motion ## Dependencies (1) - [@ibm/telemetry-js](https://npm.io/package/@ibm/telemetry-js.md) ^1.5.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 11.54.0 (latest) — 2026-10-07 - 11.54.0-rc.0 (next) — 2026-10-05 - 12.0.0-alpha.2 (v12-alpha) — 2026-09-30 - 10.29.5 (v10-next) — 2025-05-14 - 10.11.0-alpha.0 (nightly) — 2020-12-03 - 10.5.0-alpha.5640 (canary) — 2019-08-12 - 0.0.1-beta.5 (beta) — 2019-03-25 - 0.0.1-alpha.32 (alpha) — 2019-02-12 - 12.0.0-alpha.1 — 2026-09-30 - 12.0.0-alpha.0 — 2026-09-29 - 11.53.0 — 2026-09-23 - 11.53.0-rc.0 — 2026-09-21 - 11.52.0 — 2026-09-09 - 11.52.0-rc.0 — 2026-09-08 - 11.51.0 — 2026-08-27 - … 237 more at https://npm.io/package/@carbon/motion/versions ## README # @carbon/motion > 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](https://www.npmjs.com/): ```bash npm install -S @carbon/motion ``` If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead: ```bash yarn add @carbon/motion ``` ## Usage `@carbon/motion` supports standard, entrance, and exit easing curves in two motion modes: productive and expressive. It also provides duration tokens and named motion surfaces. You can access these using either Sass or JavaScript. > **Build note:** Token values are generated at build time from > `src/dtcg/motion.json` and `src/dtcg/surfaces.json`. Run `yarn build` (or > `npm run build`) once after cloning so that `js/generated/` and > `scss/generated/` are present. ### Sass `@carbon/motion` exports a `motion` function and `motion` mixin for easing curves, duration token variables, a `surface` function and `surface` mixin for named motion surfaces. Bring in the package with `@use`: ```scss @use '@carbon/motion'; .my-selector { // Easing curve — productive mode by default transition-timing-function: motion.motion(standard); } .my-selector-expressive { // Easing curve with explicit mode, set as transition-timing-function @include motion.motion(standard, expressive); } .my-panel { // Apply a named motion surface (handles enter/exit keyframes and timing) @include motion.surface(contextual); } ``` Available duration variables: ```scss @use '@carbon/motion'; .my-selector { transition-duration: motion.$duration-fast-01; // 70ms transition-duration: motion.$duration-moderate-01; // 150ms transition-duration: motion.$duration-slow-01; // 400ms } ``` ### JavaScript If you're using `@carbon/motion` as a JavaScript dependency, we export easings, duration tokens, a `motion` function, and surface utilities: ```js // ESM import { easings, motion, // Duration tokens durationFast01, durationModerate01, durationSlow01, // Surface utilities surfaces, getMotionSurface, defineMotionSurface, } from '@carbon/motion'; motion('standard', 'productive'); // Returns a string `cubic-bezier()` function getMotionSurface('contextual'); // Returns the surface definition object ``` ## 🙌 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](/.github/CONTRIBUTING.md)! 👀 ## 📝 License Licensed under the [Apache 2.0 License](/LICENSE). ## IBM Telemetry IBM Telemetry This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see [Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection). For more information on the data being collected, please see the [IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics). --- _Source: https://npm.io/package/@carbon/motion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._