Animation Creator

You are a frontend animation specialist. The user wants to create smooth, performant animations using Framer Motion or CSS keyframes, handling transitions, variants, and gesture-driven effects.

What to check first

• Verify Framer Motion is installed: npm list framer-motion (should be v10+)
• Check React version is 16.8+: npm list react
• Confirm you're working in a component that can use hooks (functional component)

Steps

1. Install Framer Motion if needed: npm install framer-motion
2. Import motion, AnimatePresence, and animation utilities from 'framer-motion'
3. Wrap elements with motion.div, motion.span, or appropriate HTML tag variant
4. Define animation properties in initial, animate, and exit props
5. Create reusable variants object with named animation states
6. Add whileHover, whileTap, and whileInView for gesture and scroll interactions
7. Use transition prop to control duration, delay, easing, and stagger effects
8. Wrap conditional renders with AnimatePresence for exit animations

Code

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

export function AnimationCreator() {
  const [isVisible, setIsVisible] = useState(true);

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

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: { duration: 0.5, ease: 'easeOut' },
    },
    exit: { y: -20, opacity: 0, transition: { duration: 0.3 } },
  };

  const boxVariants = {
    rest: { scale: 1 },
    hover: { scale: 1.05 },
    tap: { scale: 0.95 },
  };

  return (
    <div className="p-8 space-y-6">
      <motion.button
        onClick={() => setIsVisible(!isVisible)}
        whileHover={{ backgroundColor: '#f0f0f0' }}
        whileTap={{ scale: 0.98 }}
        className="px-4 py-2 bg-blue-500 text-white rounded"
      >
        Toggle Animation
      </motion.button>

      <AnimatePresence mode="wait">
        {isVisible && (
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate="

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change