Bringing Life to the Web - React + Motion Animation Patterns

Web animations have become a cornerstone of creating engaging and intuitive user experiences. They breathe life into your interfaces, guide users through interactions, and elevate the overall appeal of your application. In this guide, we’ll explore the most common and highly useful animation practices in React using Framer Motion, a declarative library admired for its versatility and performance.

Why Framer Motion?

Framer Motion simplifies animations in React. It empowers developers to create both simple transitions and complex gesture-driven interactions with minimal effort. Key features include:

• Declarative syntax for animation.

• Motion components for seamless integration.

• Support for gestures like hover, tap, and drag.

• Advanced orchestration with layout transitions, variants, and keyframes.

Add the code examples and play with the sandbox

Let’s dive into some animation practices every developer should master.

1. Hover Animations

Hover animations provide visual feedback, indicating interactive elements. They enhance user experience and draw attention to crucial components.

Example: Scaling on Hover

Using the whileHover property, you can add an animation when a user hovers over an element.

import { motion } from "framer-motion";

const HoverButton = () => (
  <motion.button 
    whileHover={{ scale: 1.1, backgroundColor: '#F25C05' }} 
    transition={{ duration: 0.3 }}
  >
    Hover me!
  </motion.button>
);

The result is a smooth scale-up effect when the user points to the button.

2. Tap Animations

Tap animations provide feedback for actions like button clicks. They assure users that their interaction has been registered.

Example: Scaling on Tap

const TapButton = () => (
  <motion.button 
    whileTap={{ scale: 0.9, rotate: 10 }} 
    transition={{ type: "spring", stiffness: 300 }}
  >
    Tap me!
  </motion.button>
);

3. List Animations

When displaying a series of items, animating their entrance and exit can create a polished, professional feel. Framer Motion’s AnimatePresence makes this seamless.

Example: Staggered List Animation

import { motion } from "framer-motion";

const list = [1, 2, 3, 4];

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.2 }
  }
};

const itemVariants = {
  hidden: { x: -50, opacity: 0 },
  visible: { x: 0, opacity: 1 }
};

const ListComponent = () => (
  <motion.div initial="hidden" animate="visible" variants={containerVariants}>
    {list.map(item => (
      <motion.div key={item} variants={itemVariants}>
        List Item {item}
      </motion.div>
    ))}
  </motion.div>
);

4. Page Layout Animations

Layout animations ensure smooth transitions when elements or pages appear/disappear. Framer Motion handles layout changes intelligently with layout and AnimatePresence.

Example: Layout Change Animation

const ExpandingCard = ({ isExpanded, toggle }) => (
  <motion.div 
    layout 
    className={isExpanded ? "expanded" : "collapsed"} 
    onClick={toggle}
  >
    Click to {isExpanded ? "Collapse" : "Expand"}
  </motion.div>
);

Framer Motion automatically animates the resizing of the card.

Page Transitions with AnimatePresence

import { motion, AnimatePresence } from "framer-motion";

const PageTransition = ({ children, isVisible }) => (
  <AnimatePresence>
    {isVisible && (
      <motion.div 
        initial={{ opacity: 0 }} 
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      >
        {children}
      </motion.div>
    )}
  </AnimatePresence>
);

This ensures smooth transitions as components enter or leave the DOM.

Advanced Practices

Now let’s step into advanced territory. Here’s how to push Framer Motion’s capabilities even further.

A. Variants for Orchestrations

Variants let you define multiple animation states and share them across components.

const parentVariant = {
  show: { scale: 1 },
  hide: { scale: 0 },
};

const circleVariant = {
  show: { opacity: 1 },
  hide: { opacity: 0 }
};

B. Drag-and-Drop Animations

Enable users to move components interactively.

<motion.div 
  drag 
  dragConstraints={{ top: 0, left: 0, right: 100, bottom: 100 }}
>
  Drag Me
</motion.div>

Conclusion

Animating on the web is an art and Framer Motion is your brush. Armed with these patterns, you’ll create delightful, engaging experiences while keeping your code clean and scalable. Start experimenting today and elevate your React UI to a whole new level of polish.

Happy animating! 🎨