Framer Motion

After prototyping animations and interactions in Framer, you can bring them to the web with the Framer Motion library.

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.).

Motion Components

Using Framer Motion

These motion components are all inside the motion object you import from the Framer Motion library.

import { motion } from "framer-motion"

The same library also contains:

  • some extra components, like <AnimatePresence> and <LayoutGroup>,
  • utilities, like useCycle() and useAnimation(),
  • and functions you can use with MotionValues, like useMotionValue() and useTransform().
import { motion, AnimatePresence, useCycle, useTransform } from "framer-motion"

Using Framer Motion in a React project

With React, you’re not creating a website in the traditional sense of the word. You’re making a single-page application. Most websites (like this one) have different pages, but a React website is just one single HTML file (with a lot of JavaScript).

That doesn’t mean that a React site can’t have different pages. It can, but those pages will actually be separate components that are dynamically shown and hidden depending on the URL requested. (More about this in Routing.)

To develop a React web app, you need a bunch of tools. Your toolbox should contain:

  • Node, to run JavaScript on your computer (instead of only in a browser),
  • the React library itself,
  • a JavaScript compiler (Babel) that translates JSX and modern JavaScript code to something that works in most browsers,
  • a local web server, so you can preview the website you’re building,
  • something that finds possible errors in your code (ESLint),
  • a module bundler (webpack) that gathers all the code (yours, React’s, and that of other modules you used) and divides it into small packages that download quickly,
  • and some scripts that make all this work together.

Fortunately, some packages already contain this whole toolkit, and you can install them with a single line in the terminal. The simplest and most popular one is Create React App.

But you can also work on a React project, not installing anything on your computer. CodeSandbox is an ‘IDE in the browser’, a code editor that contains all the above. And it even lets you directly deploy your project to an actual web server.

Leave a Reply