Search code examples
reactjsmaterial-uiframer-motion

How to use framer-motion with material-ui? (reactjs)(@material-ui/core)(framer motion)

I just want to know if there is a way to use framer-motion with Material-Ui. I tried but I am not getting it.

Solution

  • Material-UI has component prop option for this kind of requirement and should do better and more elegant approach than the wrapping-approach. Then, you can pass any props provided by framer-motion package to your Material-UI component as long as they're not conflicted (i'm not sure if any).

     <Button
  color="inherit"
  variant='contained'
  size="large"
  component={motion.div}
  whileHover={{
    scale: 1.2,
    transition: { duration: 0.3 }
  }}
  whileTap={{ scale: 0.9 }}
>
  Button
</Button>