Framer Motion Animation Patterns

# Framer Motion Animation Patterns for Google Antigravity

Master declarative animations in React applications using Framer Motion with Google Antigravity IDE. This comprehensive guide covers everything from basic transitions to complex orchestrated animations, gesture handling, and performance optimization patterns that bring your interfaces to life.

## Configuration

Configure your Antigravity environment for animation development:

```typescript
// .antigravity/framer-motion.ts
export const framerConfig = {
  patterns: ["variants", "gestures", "layout", "scroll"],
  performance: {
    useWillChange: true,
    reducedMotion: "respect",
    gpuAcceleration: true
  },
  defaults: {
    spring: { stiffness: 300, damping: 30 },
    tween: { duration: 0.3, ease: "easeOut" }
  }
};
```

## Animation Variants Pattern

Create reusable animation states with variants:

```typescript
import { motion, Variants } from "framer-motion";

const cardVariants: Variants = {
  hidden: {
    opacity: 0,
    y: 20,
    scale: 0.95
  },
  visible: {
    opacity: 1,
    y: 0,
    scale: 1,
    transition: {
      type: "spring",
      stiffness: 300,
      damping: 24
    }
  },
  hover: {
    scale: 1.02,
    boxShadow: "0 10px 30px rgba(0,0,0,0.2)",
    transition: { duration: 0.2 }
  },
  tap: {
    scale: 0.98
  },
  exit: {
    opacity: 0,
    scale: 0.9,
    transition: { duration: 0.15 }
  }
};

export function AnimatedCard({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      variants={cardVariants}
      initial="hidden"
      animate="visible"
      whileHover="hover"
      whileTap="tap"
      exit="exit"
      className="card"
    >
      {children}
    </motion.div>
  );
}
```

## Stagger Children Animation

Orchestrate sequential animations for lists:

```typescript
const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
      when: "beforeChildren"
    }
  }
};

const itemVariants: Variants = {
  hidden: { opacity: 0, x: -20 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { type: "spring", stiffness: 300, damping: 24 }
  }
};

export function AnimatedList({ items }: { items: string[] }) {
  return (
    <motion.ul
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {items.map((item, index) => (
        <motion.li key={index} variants={itemVariants}>
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}
```

## Layout Animations

Smooth layout transitions with shared layout:

```typescript
import { motion, AnimatePresence, LayoutGroup } from "framer-motion";

export function ExpandableCards({ cards }: { cards: CardData[] }) {
  const [selected, setSelected] = useState<string | null>(null);

  return (
    <LayoutGroup>
      <div className="grid">
        {cards.map((card) => (
          <motion.div
            key={card.id}
            layoutId={card.id}
            onClick={() => setSelected(card.id)}
            className="card-preview"
          >
            <motion.h3 layoutId={`title-${card.id}`}>
              {card.title}
            </motion.h3>
          </motion.div>
        ))}
      </div>

      <AnimatePresence>
        {selected && (
          <motion.div
            layoutId={selected}
            className="card-expanded"
            onClick={() => setSelected(null)}
          >
            <motion.h3 layoutId={`title-${selected}`}>
              {cards.find(c => c.id === selected)?.title}
            </motion.h3>
            <motion.p
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
            >
              Expanded content here
            </motion.p>
          </motion.div>
        )}
      </AnimatePresence>
    </LayoutGroup>
  );
}
```

## Scroll-Based Animations

Create scroll-triggered animations:

```typescript
import { motion, useScroll, useTransform, useSpring } from "framer-motion";

export function ParallaxSection() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
  });

  const y = useTransform(scrollYProgress, [0, 1], [100, -100]);
  const opacity = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], [0, 1, 1, 0]);
  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1, 0.8]);

  const smoothY = useSpring(y, { stiffness: 100, damping: 30 });

  return (
    <section ref={ref} className="parallax-section">
      <motion.div
        style={{ y: smoothY, opacity, scale }}
        className="parallax-content"
      >
        <h2>Scroll-Animated Content</h2>
      </motion.div>
    </section>
  );
}
```

## Best Practices

Follow these guidelines for optimal animations:

1. **Respect reduced motion** - Always check user preferences
2. **Use GPU-accelerated properties** - Prefer transform and opacity
3. **Implement exit animations** - Use AnimatePresence for unmounting
4. **Optimize variants** - Share variants across similar components
5. **Spring physics** - Use springs for natural-feeling motion
6. **Layout animations** - Use layoutId for smooth transitions

Google Antigravity IDE provides intelligent animation suggestions and performance warnings to help you create smooth, accessible animations.