framer-motion-variants

Boost your React animations with a collection of pre-built variants for Framer Motion. This package empowers you to create stunning animations effortlessly, saving you development time and ensuring visual consistency across your project.

• Ready-to-use Variants
• Built for Reusability

npm install framer-motion framer-motion-variants

1. Import motion and fadeIn variant from their packages.

import { motion } from "framer-motion";
import { fadeIn } from "framer-motion-variants";

2. Wrap your component with a motion.div element and assign the fadeIn variant to the variants prop.

const MyComponent = () => {
    return (
       <motion.div
          variants={fadeIn}
          initial="initial"
          animate="animate"
       >
          {/* Your component content */}
       </motion.div>
    );
};