To begin using Framer Motion in your React project, you first need to install the package. Open your terminal, navigate to your project directory, and run the following command:

npm install framer-motion

Once the installation is complete, you can import Framer Motion into your React components. In most cases, you will import the motion object, which contains all the animated components you will use. For example, at the top of your React file, you would write:

import { motion } from "framer-motion";

This allows you to start replacing standard HTML elements with their animated counterparts, enabling you to add smooth and customizable animations to your UI.

The motion component in Framer Motion is a special version of standard HTML elements that supports animation. Instead of using elements like div, span, or img directly, you use motion.div, motion.span, or motion.img. These motion components accept all the usual props of their HTML equivalents, but also support additional props for animating properties such as position, scale, opacity, and more.

By using motion components, you can easily define how elements should animate when they appear, change, or leave the DOM. This approach keeps your components declarative and easy to read, while giving you powerful control over animation behavior.