framer-motion-skills: Instructions file for GitHub Copilot

Framer Motion AI Skills

This repository contains AI skills for Framer Motion - the React animation library.

Available Skills

• framer-motion-core: Motion components, useMotionValue, useTransform, useSpring
• framer-motion-react: AnimatePresence, layout animations, SSR
• framer-motion-variants: Animation variants, stagger, repeat
• framer-motion-scroll: useScroll, useTransform, parallax
• framer-motion-gestures: Drag, tap, hover, focus
• framer-motion-layout: Shared layout transitions, layoutId

Usage

When generating or reviewing Framer Motion code in a React project, apply the relevant skill based on the feature being implemented.

Recommendations

• Use framer-motion-core for basic motion components and animation props
• Use framer-motion-react for AnimatePresence and SSR considerations
• Use framer-motion-variants for coordinated multi-element animations
• Use framer-motion-scroll for scroll-linked animations
• Use framer-motion-gestures for drag, tap, and hover interactions
• Use framer-motion-layout for shared element transitions

Code Examples

Basic Animation

import { motion } from "framer-motion";

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
/>

Variants

const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
};

AnimatePresence

import { AnimatePresence } from "framer-motion";

<AnimatePresence>
  {condition && <motion.div key="item" exit={{ opacity: 0 }} />}
</AnimatePresence>