Creating Animated UI Components with Framer Motion

Framer Motion is a production-ready motion library for React that makes it easy to create beautiful animations for your web applications. It provides a simple declarative syntax for animations and gestures.

Getting Started with Framer Motion

First, install Framer Motion in your project:

npm install framer-motion

Basic Animation

Let's create a simple animation where a box moves when it appears on screen:

import { motion } from "framer-motion";

export default function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0, x: -100 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.8 }}
      className="w-32 h-32 bg-blue-500 rounded-lg"
    />
  );
}

This creates a blue box that animates from being invisible and off-screen to visible and in position when the component mounts.

Hover and Tap Animations

Framer Motion makes it easy to add hover and tap animations:

import { motion } from "framer-motion";

export default function InteractiveButton() {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
      className="bg-purple-600 text-white px-6 py-3 rounded-lg font-medium"
    >
      Click Me
    </motion.button>
  );
}

This button will slightly scale up when hovered and scale down when clicked.

Animating Between Components

One of the most powerful features of Framer Motion is the ability to animate between components using the AnimatePresence component:

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

export default function Tabs() {
  const [selectedTab, setSelectedTab] = useState(0);
  const tabs = ["Home", "About", "Contact"];
  
  return (
    <div>
      <div className="flex space-x-4 mb-4">
        {tabs.map((tab, i) => (
          <button
            key={tab}
            onClick={() => setSelectedTab(i)}
            className={selectedTab === i ? "font-bold" : ""}
          >
            {tab}
          </button>
        ))}
      </div>
      
      <AnimatePresence mode="wait">
        <motion.div
          key={selectedTab}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{ duration: 0.2 }}
          className="p-4 bg-gray-100 rounded-lg"
        >
          Content for {tabs[selectedTab]}
        </motion.div>
      </AnimatePresence>
    </div>
  );
}

This creates a simple tabbed interface where the content animates smoothly between tabs.

Conclusion

Framer Motion provides an excellent way to add professional animations to your React applications with minimal code. By using the declarative API, you can create complex animations that enhance the user experience of your application.