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
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.
Related
I'm working with Material-UI on my NextJS project, and wanted to know if is there a way to replicate the paper background-image on other components ? It will allow me to make some other components the exact same colors as Paper, because this background-image affect the color with a lighter effect.
EDIT: this effect seems to only occurs on dark mode
Thanks
Some components like Card, Dialog, Menu (and more) already use Paper as an inner component, then they get its style. The best way to add it to your components is to just use Paper as a surface.
You can also add variants to Mui components - for example, you add paper variant to TextField, and there add the styles.
A simpler way (but not complete) is to directly add the Mui-Paper className to another component (it is not complete because there are other styles except Mui-Paper. To achieve the elevation background-image effect you mantioned, you should add .MuiPaper-elevation{props.elevation} className.
How can I animate (or transition) dom reordering with framer motion? I've read about a technique called the FLIP (mentioned here but I am unsure how I would go about implementing this into framer motion.
you can achieve by adding layout prop to your motion component. Make sure you use version of framer-motion 2.0 and above, because below that it used to be layoutTransition={transition object}.
See the working example here https://codesandbox.io/s/framer-motion-reorder-animation-forked-4jbqh?file=/src/Example.tsx
I have been breaking my head trying to figure out how to accomplish something that I figured would be quite simple (I know...)
Goal is for a very minimal, and reusable modal component that I can animate in some sort of HOC with a trigger button or w/e.
I am creating it using createPortal, and the goal is to have some simple animations be added to on enter/exit of said portal.
I have gotten this to work using GSAP, but ideally I would love for this to go along with SC instead so that I don't have to pull in another animation library.
For the life of me I just cannot get this to work with SC and would love if someone could point me in the right direction.
I have made a sandbox here: https://codesandbox.io/s/r44w9m4o5p using GSAP to run the animations, and it's a bit hacky but it is in the proper direction for what I am going for.
Also, is there a benefit to using react-transition-group over something like https://github.com/react-tools/react-move?
You can use the CSSTransition component instead of Transition. CSSTransition will just toggle approriate class names using given animation timings: .*-enter, .*-enter-active for in-transition and .*-exit, .*-exit-active for out-transition. So you can define all transitions using CSS3 properties with styled-components.
Take a look at my fork: https://codesandbox.io/s/zz95v5103
I've just extended your Modal with transition styles. Note that extending styles requires className property for the component to be extended, so I've added that property to your Modal component.
I'm new to React and want to animate a button on hover, like I could do using jQuery. First I want to change the height. When that animation is done (which I would check for using .stop() in jQuery), I want to then animate the weight. What is the best way to do this in React?
A good solution for simple usecases is to include react-transition-group.
Examples here: http://reactcommunity.org/react-transition-group/css-transition
I want to create a material-ui stepper element which looks like this:
They call it stepper element with alternative label placement.
I am using material-ui library which implements Google's Material Design. Right now all examples from that library show in-line label placing and I don't see any property which would make it possible to use alternative label placement. But I believe it was implemented at some point of time because there was discussion about it.
Is there a way to set alternative label placement for stepper right now?
According to their docs Labels can be placed below the step icon by setting the alternativeLabel prop on the Stepper component.