Motion helpers for digital and software products using the Carbon Design System
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
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! π
Licensed under the Apache 2.0 License.
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. For more information on the data being collected, please see the IBM Telemetry documentation.