How to use framer-motion with ant design

Ahmad Addel — Tue, 04 Oct 2022 08:24:26 +0000

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>

DEV Community: Ahmad Addel

How to use framer-motion with ant design