Install Framer Motion and Create a Motion Component

Instructor: [0:01] We have a shopping list application that was made we Create React App. You can add items to the list. You can remove items from the list. Everything works the way it's supposed to, but the application is boring. Let's add a little bit of a life to the application using Framer Motion.

[0:23] Go to the terminal and npm install framer-motion. Once we have Framer Motion installed, let's go to the top of the shopping list component and list import { motion } from "framer-motion." Now, we're bringing motion components into our application.

[0:58] The motion component is the heart and the soul of Framer Motion. In order to use motion components, you add motion. to the beginning of any HTML or SVG element.

[1:12] We're going to take this h1 and add motion. to the opening and closing tags of the h1 element. Now that this h1 is converted to a motion component, it gets access to special props that allow you to declaratively animate your application.