Framer » Framer Motion

Framer Motion

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

Framer Motion is a version of Framer’s API that you can use in React projects. It’s a lot lighter than the Framer library because things you don’t need in a website are omitted (e.g. Stacks, the Scroll and Page components).

Framer Motion API docs

Motion elements

The elements we animate in Framer: frame, stack, scroll, etc. are based on HTML divs. But with Framer Motion, you can animate any HTML element. You turn an element into a motion element by adding motion before it (<motion.p><motion.h1><motion.div>, etc.).

Here’s a simple example to illustrate the difference:

This rotating box as a <Frame>, inside Framer:

import { Frame } from "framer"

export function RotatingBox() {
    return (
        <Frame
            size={150}
            radius={30}
            backgroundColor="#fff"
            animate={{ rotate: 360 }}
            transition={{ duration: 2 }}
        />
    )
}

And the same box as a motion.div, in a React project:

import { motion } from "framer-motion"

export function RotatingBox() {
    return (
        <motion.div
            style={{
                width: 150,
                height: 150,
                borderRadius: 30,
                backgroundColor: "#fff",
            }}
            animate={{ rotate: 360 }}
            transition={{ duration: 2 }}
        />
    )
}

There are a few code differences; we’ll talk about those.

For more code examples: Everything in the Framer API also works in Framer Motion, so I made sure that every example in the Animation section also has a Motion version (inside the Framer project and also in a CodeSandbox).

Motion Components

Using Framer Motion in Framer

You can also use motion elements inside Framer. Framer Motion is part of the Framer library, so you can import the motion component:

import { motion } from "framer"

… and use motion.divs or any other motion element in your Framer project.

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