3

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.

Satyam
  • 164
  • 10

3 Answers3

14

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>
Ramazan Çağrı AKAR
  • 141
  • 2
6

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

Prathamesh Koshti
  • 1,058
  • 8
  • 16
1

I was also in the same situation, so after a small research, and some trial and error I wrote a small article on this, hope you guys get helped from this, and if any suggestion feels free to elaborate in the comment section.

https://aishmn.medium.com/how-to-use-material-ui-and-framer-motion-together-6026fed96a4c

Manish Yadav
  • 26
  • 2