What you will learn

Framer Motion

Most of Framer Motion’s API we already cover in Animation and Motion Values, so in the Framer Motion section, we look at some other things:

  • How to build a React website locally on your computer; or in the browser with CodeSandbox.
  • The code differences between Framer and Framer Motion
  • Using React Router to animate between pages (different URLs on your website)

Making a React website

We install Node.js and use the Create React App package to build a React website on your computer.

Create React App’s default page
CRA’s page with some Framer Motion animations

Routing

The below examples are (mini) websites made in React in which a ‘router’ (here: React Router) shows only one page at a time.

Only routing

Here’s a version with React Router but without animation.

Try the example; you’ll see that each page has its own URL.

With Animate Presence animations

With Animate Presence, you can add animations between the pages.