Animation Libraries Guide

# Animation Libraries Guide for Google Antigravity

Create captivating animations and micro-interactions using modern animation libraries with Google Antigravity IDE.

## Framer Motion Fundamentals

```typescript
// components/animated-card.tsx
"use client";

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

// Basic animations with variants
const cardVariants = {
  hidden: { opacity: 0, y: 20, scale: 0.95 },
  visible: { 
    opacity: 1, 
    y: 0, 
    scale: 1,
    transition: { duration: 0.4, ease: "easeOut" }
  },
  hover: { 
    scale: 1.02,
    boxShadow: "0 20px 40px rgba(0,0,0,0.2)",
    transition: { duration: 0.2 }
  },
  tap: { scale: 0.98 },
  exit: { 
    opacity: 0, 
    scale: 0.9, 
    transition: { duration: 0.2 } 
  }
};

export function AnimatedCard({ children, delay = 0 }) {
  return (
    <motion.div
      variants={cardVariants}
      initial="hidden"
      animate="visible"
      whileHover="hover"
      whileTap="tap"
      exit="exit"
      transition={{ delay }}
      className="card"
    >
      {children}
    </motion.div>
  );
}

// Staggered list animation
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2
    }
  }
};

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

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

// Gesture-based interactions
export function DraggableCard() {
  const x = useMotionValue(0);
  const rotate = useTransform(x, [-200, 200], [-15, 15]);
  const opacity = useTransform(x, [-200, -100, 0, 100, 200], [0.5, 1, 1, 1, 0.5]);

  return (
    <motion.div
      drag="x"
      dragConstraints={{ left: -200, right: 200 }}
      dragElastic={0.1}
      style={{ x, rotate, opacity }}
      whileDrag={{ cursor: "grabbing" }}
      onDragEnd={(_, info) => {
        if (Math.abs(info.offset.x) > 100) {
          // Handle swipe action
        }
      }}
      className="draggable-card"
    >
      Drag me!
    </motion.div>
  );
}

// Page transitions
export function PageTransition({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.3 }}
    >
      {children}
    </motion.div>
  );
}
```

## Scroll-Based Animations

```typescript
// components/scroll-animations.tsx
import { motion, useScroll, useTransform, useSpring, useInView } from "framer-motion";
import { useRef } from "react";

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]);

  return (
    <section ref={ref} className="parallax-section">
      <motion.div style={{ y, opacity, scale }} className="parallax-content">
        <h2>Parallax Content</h2>
        <p>This content moves and fades based on scroll position</p>
      </motion.div>
    </section>
  );
}

export function ScrollProgress() {
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001
  });

  return (
    <motion.div
      className="progress-bar"
      style={{ scaleX, transformOrigin: "left" }}
    />
  );
}

export function RevealOnScroll({ children }) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
      transition={{ duration: 0.6, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  );
}
```

## Layout Animations

```typescript
// components/layout-animations.tsx
import { motion, LayoutGroup, AnimatePresence } from "framer-motion";
import { useState } from "react";

export function ExpandableCards() {
  const [expandedId, setExpandedId] = useState<string | null>(null);

  const cards = [
    { id: "1", title: "Card 1", content: "Detailed content for card 1" },
    { id: "2", title: "Card 2", content: "Detailed content for card 2" },
    { id: "3", title: "Card 3", content: "Detailed content for card 3" }
  ];

  return (
    <LayoutGroup>
      <div className="cards-grid">
        {cards.map((card) => (
          <motion.div
            key={card.id}
            layoutId={card.id}
            onClick={() => setExpandedId(expandedId === card.id ? null : card.id)}
            className={expandedId === card.id ? "card expanded" : "card"}
          >
            <motion.h3 layoutId={`title-${card.id}`}>{card.title}</motion.h3>
            <AnimatePresence>
              {expandedId === card.id && (
                <motion.p
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                >
                  {card.content}
                </motion.p>
              )}
            </AnimatePresence>
          </motion.div>
        ))}
      </div>
    </LayoutGroup>
  );
}

// Shared layout animation
export function SharedLayoutTabs() {
  const [activeTab, setActiveTab] = useState(0);
  const tabs = ["Home", "About", "Contact"];

  return (
    <div className="tabs">
      {tabs.map((tab, index) => (
        <button
          key={tab}
          onClick={() => setActiveTab(index)}
          className={activeTab === index ? "active" : ""}
        >
          {tab}
          {activeTab === index && (
            <motion.div
              layoutId="activeTab"
              className="tab-indicator"
              transition={{ type: "spring", stiffness: 500, damping: 30 }}
            />
          )}
        </button>
      ))}
    </div>
  );
}
```

## Best Practices

1. **Use variants** for reusable animation definitions
2. **Implement AnimatePresence** for exit animations
3. **Optimize with layout animations** for smooth transitions
4. **Use useInView** for scroll-triggered animations
5. **Apply spring physics** for natural motion
6. **Reduce motion** for accessibility preferences
7. **Profile performance** with React DevTools

Google Antigravity provides intelligent animation suggestions and helps optimize animation performance.