Introduction

Motion elements

With Framer Motion, you can animate any HTML or SVG element. You turn an element into a motion element by adding motion before it (<motion.p>, <motion.h1>, <motion.div>, etc.).

The motion object you import contains components for every possible HTML and SVG element. So you’ll often use <motion.div>… to animate a <div>, but there’s also: <motion.h1>, <motion.svg>, <motion.path>, etc.

Motion Components

The <motion> component

These motion elements (actually components) are all inside the motion component you import from Framer Motion.

import { motion } from "framer-motion"

The Framer Motion library also contains:

• some extra components, like <AnimatePresence> and <LayoutGroup>,
• utilities, like useCycle() and useAnimate(),
• and hooks you can use with Motion values, like useMotionValue() and useTransform().

import { motion, AnimatePresence, useCycle, useTransform } from "framer-motion"

Installation

As mentioned in the Framer Motion docs and on its NPM page, you add Framer Motion to a React project by typing:

npm install framer-motion

And then you can import motion and animate, well, everything.

import { motion } from "framer-motion"