@carbon/motion v11.24.0
@carbon/motion
Motion helpers for digital and software products using the Carbon Design System.
Getting Started
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
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
Styles
If you're using @carbon/motion
as a Sass dependency, we export a function and
mixin called motion
that you can use to get the correct transition-property
for your styles.
You can import @carbon/motion
by including it at the top of your file like so:
@import '@carbon/motion/scss/motion.scss';
.my-custom-selector {
// Function for `motion`
transition-property: motion(standard, productive);
}
.my-other-custom-selector {
// Shortcut for above, sets `transition-property` with the value for the
// standard easing curve in productive mode.
@include motion(standard, productive);
}
🤲 Contributing
To learn more about how to contribute, look here!
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
5 months ago
6 months ago
6 months ago
6 months ago
5 months ago
4 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago