Using Framer Motion for Stunning Animations in React

Published on 25.12.2020

Animations can greatly enhance the user experience in any web application, adding interactivity, improving visual flow, and keeping users engaged. While CSS animations have been a go-to solution for animations in the past, Framer Motion is rapidly gaining popularity in the React community for its simplicity and power.

In this post, we will:

Explain why Framer Motion is better than CSS animations.
Show you how to create smooth page transitions.
Walk through animating modals and other UI elements with ease.

Let’s dive in!

Why Framer Motion is Better than CSS Animations

While CSS animations are great for basic effects, Framer Motion takes animations to the next level by offering more control, flexibility, and interactivity. Here are a few reasons why Framer Motion stands out compared to traditional CSS animations:

1. Declarative Animations

Framer Motion offers a declarative way to create animations. Instead of writing keyframes and applying them with CSS classes, you can animate directly within React components by using simple props. This makes it far easier to manage animations alongside your component state.

With CSS, animations often require you to manually trigger or coordinate them with JavaScript. But with Framer Motion, you can create animations that respond to state changes and user interactions without the need for additional JavaScript.

2. More Control and Flexibility

CSS animations can be somewhat limited, especially when you need to handle complex transitions. With Framer Motion, you can animate multiple properties, stagger animations, and add dynamic controls such as delays, timing functions, and spring physics. It also offers a rich set of built-in hooks for animation triggers, like whileHover, whileTap, and animate.

3. Built-in Gesture Handling

Framer Motion comes with powerful gesture support built right into the library. You can easily animate elements based on drag, hover, tap, and other gestures. This makes it perfect for creating interactive, mobile-friendly animations.

4. Optimized for React

Framer Motion was specifically designed with React in mind, so it integrates seamlessly with React components and hooks. It provides an intuitive API that feels native to React developers, allowing you to keep animations in sync with state changes.

Creating Smooth Page Transitions

Page transitions are a key part of modern web applications, helping to create a smoother user experience when navigating between different views. With Framer Motion, you can easily create smooth transitions with motion.div, motion.section, or any other element you want to animate.

Example: Page Transition with Framer Motion

First, install Framer Motion in your project if you haven’t already:

npm install framer-motion

Here’s a simple example of animating page transitions between two components:

import React from 'react';
import { motion } from 'framer-motion';

function Page() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.5 }}
    >
      <h1>Welcome to the Page!</h1>
    </motion.div>
  );
}

export default Page;

In the example above, we use Framer Motion’s motion.div to wrap the page content and apply the following animations:

initial: The starting state of the page, set to 0 opacity.
animate: The state to animate to, set to 1 opacity (fully visible).
exit: The exit animation when the page is unmounted, also fading out with 0 opacity.
transition: The duration of the transition.

Now, to make the page transition smooth when navigating between components, you can use AnimatePresence:

import React from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { Route, Switch } from 'react-router-dom';
import Page from './Page';

function App() {
  return (
    <AnimatePresence exitBeforeEnter>
      <Switch>
        <Route path="/page" component={Page} />
      </Switch>
    </AnimatePresence>
  );
}

export default App;

AnimatePresence ensures that the exit animations of the previous page run before the new page enters. The exitBeforeEnter prop makes sure the outgoing page fades before the incoming page appears.

Animating Modals and UI Elements

Animating modals, tooltips, and other UI elements can help improve the user experience by making interactions feel more polished. Let’s explore how we can use Framer Motion to animate modals and UI elements.

Example: Modal Animation

Here’s how you can animate a simple modal with Framer Motion:

import React, { useState } from 'react';
import { motion } from 'framer-motion';

function Modal() {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>

      {isOpen && (
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.8 }}
          transition={{ duration: 0.3 }}
          className="modal"
        >
          <div className="modal-content">
            <h2>Modal Title</h2>
            <p>This is a simple modal animation.</p>
            <button onClick={closeModal}>Close</button>
          </div>
        </motion.div>
      )}
    </div>
  );
}

export default Modal;

In this example:

The modal uses motion.div to animate the opacity and scale as it opens and closes.
When the modal opens, the initial state is set to an opacity of 0 and scale of 0.8, and when it opens, it transitions to opacity of 1 and scale of 1.
Exit animations also use opacity and scale to animate the modal when it’s closed.

Animating UI Elements

In addition to page transitions and modals, Framer Motion makes it easy to animate simple UI elements, like buttons, icons, and cards. For example:

Example: Hover Animations for Buttons

import React from 'react';
import { motion } from 'framer-motion';

function AnimatedButton() {
  return (
    <motion.button
      whileHover={{ scale: 1.1, rotate: 10 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: 'spring', stiffness: 300 }}
    >
      Hover or Tap Me!
    </motion.button>
  );
}

export default AnimatedButton;

In the example:

whileHover animates the button when hovered, scaling it slightly and rotating it.
whileTap animates the button when clicked, making it shrink a bit with scale: 0.95.
The transition defines a spring-based animation for a natural feel.

Conclusion

Framer Motion has become one of the most popular libraries for adding animations to React applications, and for good reason. Its ease of use, flexibility, and deep integration with React make it the perfect choice for developers looking to add smooth and interactive animations.

Whether you’re animating page transitions, modals, or even individual UI elements, Framer Motion makes it easy to bring your React app to life with fluid, visually appealing animations.

If you haven’t already, give Framer Motion a try today, and elevate your app’s user experience with stunning animations!