Framer Motion Basic Animation with motion Components

You need declarative enter animations in a React component without managing CSS classes or JS state for animation triggers.

Replace HTML elements with their motion.* counterparts and use initial, animate, and transition props to drive animations declaratively.

import { motion } from 'framer-motion';

function Card() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut' }}
    >
      Hello
    </motion.div>
  );
}

For reusable variants, extract to a variants object:

const cardVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

<motion.div variants={cardVariants} initial="hidden" animate="visible" />

Framer Motion tracks animation state internally, so you never imperatively start or cancel animations. The declarative model makes animation intent clear at the component level.