DEV Community

Cover image for How to use framer-motion with ant design
Ahmad Addel
Ahmad Addel

Posted on

How to use framer-motion with ant design

ant design does not support integration with framer-motion , that's what you will need a work-around.

  • Pass the motion.div (or any other component) to the and.design as component

Image description

  • Now you can destructure the framer-motion object into the antd component and it will work just fine.

Image description

  • If you are using TS and need the auto complete feature, just create a function that takesAnimationProps as as parameter to return it again.

Image description

Final result

Final result

Code

import { motion, AnimationProps } from "framer-motion";
const Animation = (props: AnimationProps) => props;
<Form component={motion.form} {...Animation({ /* Here */})}></Form>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)