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

• Sass

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