Search code examples
reactjsanimationmotioncarbon-design-system

how to use motion in carbon design for component transitions?

I would like to use carbon design motion in a react project.

I've been following the guidelines here: https://github.com/carbon-design-system/carbon/tree/v10/packages/motion

I've added this line into my codesandbox (my sandbox linked here: https://codesandbox.io/s/carbon-components-react-forked-3ul1pt?file=/src/index.js:0-514)

const { easings, motion } = require('@carbon/motion');

but not sure now how to use 'easings' or 'motion' to animate a component/

How could i use carbon design to make the buttons in the codesandbox above fade in or out? (or do any animated transition for that matter) thanks

Solution

  • The motion()​ function will return a cubic bezier string that you can provide to css-in-js styling to control the rate of motion for your animations. This can be used for any property that is animatable. Similarly you can specify this in sass if you're using sass for writing your styles.

    For fading a button you would place opacity: 0 on the component by default, and then toggle a secondary class/style with opacity: 1. This would transition the component from transparent to opaque when the class/style is applied and vice-versa. Alongside the opacity, you can specify the cubic bezier value.

    Here's a good article on the topic that might be helpful to read more about how to use these properties.