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

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

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

Final result

Code

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