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

Question

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.

Answer 1

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>

Answer 2

Your question made me curious. I never tried the framer-motion, but was planning to learn it recently.

So I gave it a try, created a sandbox, added a Material UI and framer motion packages in it.

Just created a small button in the middle of the page using Material UI. And wrapped the button using <motion.div> tag, like this:

import React from "react";
import { motion } from "framer-motion";
import Button from "@material-ui/core/Button";

function AnimatableDiv() {
  return (
    <motion.div
      className="animatable"
      whileHover={{
        scale: 1.2,
        transition: { duration: 0.3 }
      }}
      whileTap={{ scale: 0.9 }}
    >
      <Button size="large" className="animatable">
        Button
      </Button>
    </motion.div>
  );
}

export default AnimatableDiv;

And it worked!

You might be thinking what if I use the the motion. directly on the <Button> component, like this:

<motion.Button size="large" className="animatable">
  Button
</motion.Button>

Well, I did think of this, and I applied it as well and all the styling that Material UI applied to that button were lost! So do not follow this approach! I repeat do not!

Here's the link can have a look at it: https://codesandbox.io/s/brave-sutherland-5bki9