React state is a powerful tool for controlling how your UI responds to user actions and data changes. With Framer Motion, you can connect state changes directly to animations by using the animate prop on motion components. When your state changes, Framer Motion automatically animates the component's properties from their previous values to the new ones you provide. This seamless link between state and animation allows you to create dynamic, interactive experiences that feel smooth and responsive. By updating state in response to events—such as button clicks, form submissions, or data fetching—you can trigger visual feedback that enhances user understanding and engagement.

Imagine you want to show and hide some content with a fade effect when a button is clicked. You can use React's state to track whether the content is visible, and then animate the opacity of a motion component based on that state. Here is a simple way to achieve this:

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

function FadeToggle() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(v => !v)}>
        Toggle Content
      </button>
      <motion.div
        animate={{ opacity: isVisible ? 1 : 0 }}
        initial={{ opacity: 0 }}
        transition={{ duration: 0.5 }}
        style={{ width: 200, height: 100, background: "#eee", marginTop: 16 }}
      >
        This content will fade in and out.
      </motion.div>
    </div>
  );
}

In this example, clicking the button toggles the isVisible state. The motion.div animates its opacity property between 0 and 1, creating a fade-in or fade-out effect each time the state changes.