When you want to bring your React interfaces to life, Framer Motion offers a set of special components called motion components. These are enhanced versions of standard HTML elements, such as div, span, or img, and they make it easy to add smooth, declarative animations to your UI. You use them by simply replacing the standard element with its motion counterpart, like motion.div instead of div. The syntax remains familiar, but you gain access to powerful animation features through additional props.

For example, to animate a box from one position to another, you would use motion.div like this:

import { motion } from "framer-motion";

function AnimatedBox() {
  return (
    <motion.div
      initial={{ x: 0 }}
      animate={{ x: 100 }}
      transition={{ duration: 0.5 }}
      style={{ width: 100, height: 100, background: "blue" }}
    />
  );
}

This example shows how you can control the box's movement using props that are unique to motion components. You will find that nearly all standard HTML elements have a motion equivalent, so you can animate almost any part of your UI just by swapping out the component.

The core of animating with motion components is understanding the three most important props: initial, animate, and transition.

• initial: sets the starting state of the animation. This is how the element will appear when it first renders;
• animate: defines the target state. This is where you want the element to end up after the animation runs;
• transition: controls how the animation happens, such as its duration, delay, and easing.

Using these props together, you can describe both what changes and how those changes should feel. For instance, you might set initial={{ opacity: 0 }} to make an element start invisible, animate={{ opacity: 1 }} to fade it in, and transition={{ duration: 1 }} to control how quickly it fades. These props can be combined to animate multiple properties at once, such as position, scale, color, or rotation. By adjusting the values of initial, animate, and transition, you gain precise control over your component's animation behavior.