Install and Set Up Framer Motion with React

Before you can learn to walk, you've got to crawl. Or in our case, you've got to install... Framer Motion, that is. Ok sorry, that's pretty bad.

Here we'll cover how to get up and running with Framer Motion in your React project. Luckily, if you're comfortable with installing dependencies, you're most of the way there.

Basic Installation

The first step is to install using the package manager of your choice. Open your terminal and run:

npm install framer-motion

Or if you're using Yarn:

yarn add framer-motion

Once installed, you can import and use Framer Motion components in your React files:

import { motion } from "framer-motion";

function MyComponent() {
  return <motion.div animate={{ opacity: 1 }} />;
}

Framework-Specific Setup

Next.js

Next.js works seamlessly with Framer Motion out of the box. After installing Framer Motion, you can use it in your components without any additional configuration.

However, if you're using Server-Side Rendering (SSR) or Static Site Generation (SSG), you might want to use the <LazyMotion> component to reduce your bundle size:

import { LazyMotion, domAnimation } from "framer-motion";

function MyApp({ Component, pageProps }) {
  return (
    <LazyMotion features={domAnimation}>
      <Component {...pageProps} />
    </LazyMotion>
  );
}

export default MyApp;

Remix

Remix also works well with Framer Motion. After installation, you can use Framer Motion components in your Remix routes. However, to avoid hydration mismatches, it's recommended to use the useClient hook from Remix for client-side only animations:

import { useClient } from "remix";
import { motion } from "framer-motion";

export default function MyComponent() {
  const client = useClient();

  if (!client) {
    return <div>Loading...</div>;
  }

  return <motion.div animate={{ opacity: 1 }} />;
}

Vite

If you're using Vite (one of my personal favorites), Framer Motion works seamlessly out of the box. After installing, you can use it in your components without any additional setup.

Integrating with Styling Libraries

Often you'll find yourself using Framer Motion alongside a styling library like Tailwind, Styled Components, or Emotion. Typically it's pretty strightforward to do so... here are a couple examples with some popular libraries.

Tailwind CSS

Framer Motion integrates well with Tailwind CSS. You can apply Tailwind classes directly to Framer Motion components:

import { motion } from "framer-motion";

function MyComponent() {
  return (
    <motion.div className="bg-blue-500 p-4 rounded" whileHover={{ scale: 1.1 }}>
      Hover me!
    </motion.div>
  );
}

Styled Components

To use Framer Motion with Styled Components, you can create motion components using the styled function:

import styled from "styled-components";
import { motion } from "framer-motion";

const AnimatedBox = styled(motion.div)`
  width: 100px;
  height: 100px;
  background-color: #3498db;
`;

function MyComponent() {
  return <AnimatedBox animate={{ rotate: 360 }} />;
}

Emotion

Emotion works similarly to Styled Components with Framer Motion:

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import { motion } from "framer-motion";

const boxStyle = css`
  width: 100px;
  height: 100px;
  background-color: #3498db;
`;

function MyComponent() {
  return <motion.div css={boxStyle} animate={{ rotate: 360 }} />;
}

Troubleshooting

1. "Framer Motion is not defined" error:

   • Make sure you've installed Framer Motion correctly.
   • Check that you're importing it correctly: import { motion } from 'framer-motion'.

2. Animations not working in SSR:

   • Use the <LazyMotion> component as shown in the Next.js section.
   • Ensure you're not trying to animate on the server side.

3. Conflicts with other animation libraries:

   • Avoid using multiple animation libraries in the same component.
   • If necessary, wrap different parts of your app with different animation contexts.

4. Performance issues:

   • Use the useTransform hook for more efficient animations.
   • Animate CSS properties that trigger only composition where possible (transform, opacity).

5. TypeScript errors:

   • Make sure you have the correct types installed: npm install @types/framer-motion.
   • Use the correct type definitions for your components and variants.

Conclusion

Congrats! You're set up and ready to walk (and run!) with Framer Motion.