@stead/motion
v0.1.1
Published
Motion helpers for digital and software products
Downloads
1
Readme
@stead/motion
Motion helpers for digital and software products using the Carbon Design System
Getting started
To install @stead/motion
in your project, you will need to run the following
command using npm:
npm install -S @stead/motion
If you prefer Yarn, use the following command instead:
yarn add @stead/motion
Usage
@stead/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.
Sass
@stead/motion
exports a stead-motion
function and stead-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 '@stead/motion/scss/motion.scss';
.my-custom-selector {
// Supplies the standard easing curve, using the productive mode by default
transition-timing-function: stead-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 stead-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.
JavaScript
If you're using @stead/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('@stead/motion');
You can also include this as a JavaScript module:
// ESM
import { easings, motion } from '@stead/motion';
motion('standard', 'productive'); // Returns a string `cubic-bezier()` function
📖 API Documentation
If you're looking for @stead/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.