New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Motion Framer

by AnastasiyaW in AnastasiyaW/codex-claude-code-config

A skill your agent uses when implementing Motion or Framer Motion in React/JavaScript: interactive UI components, micro-interactions, gestures, layout or page transitions, and scroll-based animation.

MITAuto-check passedFrontend & Design

Install Motion Framer

skills CLI
$ npx skills add AnastasiyaW/codex-claude-code-config --skill motion-framer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install AnastasiyaW/codex-claude-code-config motion-framer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend/motion-framer .claude/skills/motion-framer && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
motion-framer
GitHub stars
154
Used in
1 other repo
Token cost
~5.2k tokens
SKILL.md length
755 words
Files
17 (incl. scripts, references, assets)
Skills in repo
50
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when implementing Motion or Framer Motion in React/JavaScript: interactive UI components, micro-interactions, gestures, layout or page transitions, and scroll-based animation.

  • Works in 12 steps: Motion Components → Animate Prop → Initial State → …
  • Implementing Motion
  • SKILL.md covers Overview, Core Concepts, Common Patterns and Gesture Recognition, plus 3 more sections
  • Runs JavaScript scripts from its folder

What it does

Motion Framer is an agent skill from AnastasiyaW/codex-claude-code-config. Use when implementing Motion or Framer Motion in React/JavaScript: interactive UI components, micro-interactions, gestures, layout or page transitions, and scroll-based animation. Do not use for static styling, backend/API work, or animation in another runtime unless Motion/Framer Motion is an explicit dependency.

Its SKILL.md is about 5.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 22 other files, including scripts, reference files and assets (for example `assets/examples/README.md`, `assets/starter_motion/README.md` and `assets/starter_motion/package.json`).

It sits in Frontend & Design, covering Web animation and motion. It works with Motion, React and JavaScript. The repository describes itself as: Claude Code, Codex, and multi-agent configuration system: principles, hooks, skills, and workflow patterns for AI-assisted development. The licence is MIT.

When your agent uses it

  • Implementing Motion
  • Framer Motion in React/JavaScript: interactive UI components
  • Micro-interactions
  • Page transitions

Example prompts

  • “/motion-framer”

Requirements

  • Node.js

Workflow steps

12 steps, taken from the step headings in SKILL.md.

  1. Motion Components
  2. Animate Prop
  3. Initial State
  4. Transitions
  5. Variants
  6. Hover Animations
  7. Tap/Press Animations
  8. Drag Interactions
  9. Exit Animations (AnimatePresence)
  10. Layout Animations
  11. Scroll-Based Animations
  12. Spring Animations

What it can do on your machine

Read from SKILL.md and the folder at commit e71c6a8. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • motion.dev
    • framer.com
    • github.com
    • discord.gg
    • codesandbox.io

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Motion Framer loads about 5.2k tokens when it runs, and up to ~10k if it reads all its reference files. Until then it costs about 82 tokens; SKILL.md has 755 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~82
When it runs · the whole SKILL.md, loaded when a task matches
~5.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~10k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from AnastasiyaW/codex-claude-code-config at commit e71c6a8, republished under its MIT licence (© AnastasiyaW). 755 words, ~5,239 tokens.

Download SKILL.mdSave it as .claude/skills/motion-framer/SKILL.md (or your agent's skills folder). This skill also uses 16 other files; get the full folder from GitHub.
name
motion-framer
description
Use when implementing Motion or Framer Motion in React/JavaScript: interactive UI components, micro-interactions, gestures, layout or page transitions, and scroll-based animation. Do not use for static styling, backend/API work, or animation in another runtime unless Motion/Framer Motion is an explicit dependency.

Motion & Framer Motion

Overview

Motion (formerly Framer Motion) is a production-ready animation library for React and JavaScript that enables declarative, performant animations with minimal code. It provides motion components that wrap HTML elements with animation superpowers, supports gesture recognition (hover, tap, drag, focus), and includes advanced features like layout animations, exit animations, and spring physics.

When to use this skill:

  • Building interactive UI components (buttons, cards, menus)
  • Creating micro-interactions and hover effects
  • Implementing page transitions and route animations
  • Adding scroll-based animations and parallax effects
  • Animating layout changes (resizing, reordering, shared element transitions)
  • Drag-and-drop interfaces
  • Complex animation sequences and state-based animations
  • Replacing CSS transitions with more powerful, controllable animations

Technology:

  • Motion (v11+) - The modern, smaller library from Framer Motion creators
  • Framer Motion - The full-featured predecessor (still widely used)
  • React 18+ compatible, also supports Vue
  • Supports TypeScript
  • Works with Next.js, Vite, Remix, and all modern React frameworks

Core Concepts

1. Motion Components

Convert any HTML/SVG element into an animatable component by prefixing with motion.:

jsx
import { motion } from "framer-motion"

// Regular HTML becomes motion component
<motion.div />
<motion.button />
<motion.svg />
<motion.path />

Every motion component accepts animation props like animate, initial, transition, and gesture props like whileHover, whileTap, etc.

2. Animate Prop

The animate prop defines the target animation state. When values change, Motion automatically animates to them:

jsx
// Simple animation - x position changes
<motion.div animate={{ x: 100 }} />

// Multiple properties
<motion.div animate={{ x: 100, opacity: 1, scale: 1.2 }} />

// Animates when state changes
const [isOpen, setIsOpen] = useState(false)
<motion.div animate={{ width: isOpen ? 300 : 100 }} />
3. Initial State

Set the initial state before animation using the initial prop:

jsx
<motion.div
  initial={{ opacity: 0, y: 50 }}
  animate={{ opacity: 1, y: 0 }}
/>

Set initial={false} to disable initial animations on mount.

4. Transitions

Control how animations move between states using the transition prop:

jsx
// Duration-based
<motion.div
  animate={{ x: 100 }}
  transition={{ duration: 0.5, ease: "easeInOut" }}
/>

// Spring physics
<motion.div
  animate={{ scale: 1.2 }}
  transition={{ type: "spring", stiffness: 300, damping: 20 }}
/>

// Different transitions for different properties
<motion.div
  animate={{ x: 100, opacity: 1 }}
  transition={{
    x: { type: "spring", stiffness: 300 },
    opacity: { duration: 0.2 }
  }}
/>

Transition types:

  • "tween" (default) - Duration-based with easing
  • "spring" - Physics-based spring animation
  • "inertia" - Decelerating animation (used in drag)
5. Variants

Organize animation states using named variants for cleaner code and propagation to children:

jsx
const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
  exit: { opacity: 0, scale: 0.9 }
}

<motion.div
  variants={variants}
  initial="hidden"
  animate="visible"
  exit="exit"
/>

Variant propagation - Children automatically inherit parent variant states:

jsx
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1  // Stagger child animations
    }
  }
}

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

<motion.ul variants={containerVariants} initial="hidden" animate="visible">
  <motion.li variants={itemVariants} />
  <motion.li variants={itemVariants} />
  <motion.li variants={itemVariants} />
</motion.ul>

Common Patterns

1. Hover Animations

Animate on hover using whileHover prop:

jsx
// Simple hover effect
<motion.button
  whileHover={{ scale: 1.1 }}
  transition={{ duration: 0.2 }}
>
  Hover me
</motion.button>

// Multiple properties
<motion.div
  whileHover={{
    scale: 1.05,
    backgroundColor: "#f0f0f0",
    boxShadow: "0px 10px 30px rgba(0, 0, 0, 0.2)"
  }}
>
  Hover card
</motion.div>

// With custom transition
<motion.button
  whileHover={{
    scale: 1.2,
    transition: { duration: 0.1 }  // Transition for gesture start
  }}
  transition={{ duration: 0.5 }}  // Transition for gesture end
>
  Button
</motion.button>

Hover with nested elements:

jsx
<motion.div whileHover="hover" variants={cardVariants}>
  <motion.h3 variants={titleVariants}>Title</motion.h3>
  <motion.img variants={imageVariants} />
</motion.div>
2. Tap/Press Animations

Animate on tap/press using whileTap prop:

jsx
// Scale down on tap
<motion.button
  whileTap={{ scale: 0.9 }}
>
  Click me
</motion.button>

// Combined hover + tap
<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95, rotate: 3 }}
>
  Interactive button
</motion.button>

// With variants
const buttonVariants = {
  rest: { scale: 1 },
  hover: { scale: 1.1 },
  pressed: { scale: 0.95 }
}

<motion.button
  variants={buttonVariants}
  initial="rest"
  whileHover="hover"
  whileTap="pressed"
>
  Button
</motion.button>
3. Drag Interactions

Make elements draggable with the drag prop:

jsx
// Basic dragging (both axes)
<motion.div drag />

// Constrain to axis
<motion.div drag="x" />  // Only horizontal
<motion.div drag="y" />  // Only vertical

// Drag constraints
<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
/>

// Drag with parent constraints
<motion.div ref={constraintsRef}>
  <motion.div drag dragConstraints={constraintsRef} />
</motion.div>

// Visual feedback while dragging
<motion.div
  drag
  whileDrag={{
    scale: 1.1,
    boxShadow: "0px 10px 20px rgba(0,0,0,0.2)",
    cursor: "grabbing"
  }}
  dragElastic={0.1}  // Elasticity when dragging outside constraints
  dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
/>

Drag events:

jsx
<motion.div
  drag
  onDragStart={(event, info) => console.log(info.point)}
  onDrag={(event, info) => console.log(info.offset)}
  onDragEnd={(event, info) => console.log(info.velocity)}
/>
4. Exit Animations (AnimatePresence)

Animate components when they're removed from the DOM using AnimatePresence:

jsx
import { AnimatePresence } from "framer-motion"

// Basic exit animation
<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    />
  )}
</AnimatePresence>

Key requirements:

  • Component must be direct child of <AnimatePresence>
  • Must have a unique key prop
  • Use exit prop to define exit animation

List items with exit animations:

jsx
<AnimatePresence>
  {items.map(item => (
    <motion.li
      key={item.id}
      initial={{ opacity: 0, x: -50 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: 50 }}
      layout  // Smooth layout shifts
    >
      {item.name}
    </motion.li>
  ))}
</AnimatePresence>

Staggered exit animations:

jsx
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      when: "beforeChildren",
      staggerChildren: 0.1
    }
  },
  exit: {
    opacity: 0,
    transition: {
      when: "afterChildren",
      staggerChildren: 0.05,
      staggerDirection: -1  // Reverse order
    }
  }
}

<AnimatePresence>
  {show && (
    <motion.div variants={containerVariants} initial="hidden" animate="visible" exit="exit">
      <motion.div variants={itemVariants} />
      <motion.div variants={itemVariants} />
      <motion.div variants={itemVariants} />
    </motion.div>
  )}
</AnimatePresence>
5. Layout Animations

Automatically animate layout changes (position, size) with the layout prop:

jsx
// Animate all layout changes
<motion.div layout />

// Animate only position changes
<motion.div layout="position" />

// Animate only size changes
<motion.div layout="size" />

Grid layout animation:

jsx
const [columns, setColumns] = useState(3)

<motion.div className="grid">
  {items.map(item => (
    <motion.div
      key={item.id}
      layout
      transition={{ layout: { duration: 0.3, ease: "easeInOut" } }}
    />
  ))}
</motion.div>

Shared layout animations (layoutId):

Connect two different elements for smooth transitions using layoutId:

jsx
// Tab indicator example
<nav>
  {tabs.map(tab => (
    <button key={tab.id} onClick={() => setActive(tab.id)}>
      {tab.label}
      {activeTab === tab.id && (
        <motion.div
          layoutId="underline"
          style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2 }}
        />
      )}
    </button>
  ))}
</nav>

// Modal opening from thumbnail
<motion.img
  src={thumbnail}
  layoutId="product-image"
  onClick={() => setExpanded(true)}
/>

<AnimatePresence>
  {expanded && (
    <motion.div layoutId="product-image">
      <img src={fullsize} />
    </motion.div>
  )}
</AnimatePresence>
6. Scroll-Based Animations

Animate elements when they enter the viewport using whileInView:

jsx
<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.8 }}  // once: trigger once, amount: 80% visible
  transition={{ duration: 0.5 }}
>
  Animates when scrolled into view
</motion.div>

Viewport options:

  • once: true - Animation triggers only once
  • amount: 0.5 - Percentage of element visible (0-1) or "some" | "all"
  • margin: "-100px" - Offset viewport boundaries

Staggered scroll animations:

jsx
<motion.ul
  initial="hidden"
  whileInView="visible"
  viewport={{ once: true, amount: 0.3 }}
  variants={{
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1 }
    },
    hidden: { opacity: 0 }
  }}
>
  <motion.li variants={itemVariants} />
  <motion.li variants={itemVariants} />
  <motion.li variants={itemVariants} />
</motion.ul>
7. Spring Animations

Use spring physics for natural, bouncy animations:

jsx
// Basic spring
<motion.div
  animate={{ scale: 1.2 }}
  transition={{ type: "spring" }}
/>

// Customize spring physics
<motion.div
  animate={{ x: 100 }}
  transition={{
    type: "spring",
    stiffness: 300,  // Higher = faster, snappier (default: 100)
    damping: 20,     // Higher = less bouncy (default: 10)
    mass: 1,         // Higher = more inertia (default: 1)
  }}
/>

// Visual duration (easier spring control)
<motion.div
  animate={{ rotate: 90 }}
  transition={{
    type: "spring",
    visualDuration: 0.5,  // Perceived duration
    bounce: 0.25          // Bounciness (0-1, default: 0.25)
  }}
/>

Spring presets:

  • Gentle: stiffness: 100, damping: 20
  • Wobbly: stiffness: 200, damping: 10
  • Stiff: stiffness: 400, damping: 30
  • Slow: stiffness: 50, damping: 20
Show full SKILL.md (305 more words)Show less

Gesture Recognition

Motion provides declarative gesture handlers:

Gesture Props
jsx
<motion.div
  whileHover={{ scale: 1.1 }}        // Pointer hovers over element
  whileTap={{ scale: 0.9 }}          // Primary pointer presses element
  whileFocus={{ outline: "2px" }}    // Element gains focus
  whileDrag={{ scale: 1.1 }}         // Element is being dragged
  whileInView={{ opacity: 1 }}       // Element is in viewport
/>
Gesture Events
jsx
<motion.div
  onHoverStart={(event, info) => {}}
  onHoverEnd={(event, info) => {}}
  onTap={(event, info) => {}}
  onTapStart={(event, info) => {}}
  onTapCancel={(event, info) => {}}
  onDragStart={(event, info) => {}}
  onDrag={(event, info) => {}}
  onDragEnd={(event, info) => {}}
  onViewportEnter={(entry) => {}}
  onViewportLeave={(entry) => {}}
/>

Event info objects contain:

  • point: { x, y } - Page coordinates
  • offset: { x, y } - Offset from drag start
  • velocity: { x, y } - Drag velocity

Hooks

useAnimate

Manually control animations with the useAnimate hook:

jsx
import { useAnimate } from "framer-motion"

function Component() {
  const [scope, animate] = useAnimate()

  useEffect(() => {
    // Animate multiple elements
    animate([
      [scope.current, { opacity: 1 }],
      ["li", { x: 0, opacity: 1 }, { delay: stagger(0.1) }],
      [".button", { scale: 1.2 }]
    ])
  }, [])

  return (
    <div ref={scope}>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
      <button className="button">Click</button>
    </div>
  )
}

Animation controls:

jsx
const controls = animate(element, { x: 100 })
controls.play()
controls.pause()
controls.stop()
controls.speed = 0.5
controls.time = 0  // Seek to start
useSpring

Create spring-animated motion values:

jsx
import { useSpring } from "framer-motion"

function Component() {
  const x = useSpring(0, { stiffness: 300, damping: 20 })

  return (
    <motion.div style={{ x }}>
      <button onClick={() => x.set(100)}>Move</button>
    </motion.div>
  )
}
useInView

Detect when an element is in viewport:

jsx
import { useInView } from "framer-motion"

function Component() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.5 })

  return (
    <div ref={ref}>
      {isInView ? "In view!" : "Not in view"}
    </div>
  )
}

Integration Patterns

With GSAP

Combine Motion for React state-based animations and GSAP for complex timelines:

jsx
import { motion } from "framer-motion"
import gsap from "gsap"

function Component() {
  const boxRef = useRef()

  const handleClick = () => {
    // Use GSAP for complex timeline
    const tl = gsap.timeline()
    tl.to(boxRef.current, { rotation: 360, duration: 1 })
      .to(boxRef.current, { scale: 1.5, duration: 0.5 })
  }

  return (
    // Use Motion for hover/tap/layout animations
    <motion.div
      ref={boxRef}
      whileHover={{ scale: 1.1 }}
      onClick={handleClick}
    />
  )
}
With React Three Fiber

Animate 3D objects using Motion values:

jsx
import { motion } from "framer-motion"
import { useFrame } from "@react-three/fiber"

function Box() {
  const x = useMotionValue(0)

  useFrame(() => {
    // Sync Motion value with Three.js position
    meshRef.current.position.x = x.get()
  })

  return (
    <>
      <mesh ref={meshRef}>
        <boxGeometry />
        <meshStandardMaterial />
      </mesh>
      <motion.div
        style={{ x }}
        drag="x"
        dragConstraints={{ left: -5, right: 5 }}
      />
    </>
  )
}
With Form Libraries

Animate form validation states:

jsx
import { motion, AnimatePresence } from "framer-motion"

function FormField({ error }) {
  return (
    <div>
      <motion.input
        animate={{
          borderColor: error ? "#ff0000" : "#cccccc",
          x: error ? [0, -10, 10, -10, 10, 0] : 0  // Shake animation
        }}
        transition={{ duration: 0.4 }}
      />
      <AnimatePresence>
        {error && (
          <motion.p
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            style={{ color: "#ff0000" }}
          >
            {error}
          </motion.p>
        )}
      </AnimatePresence>
    </div>
  )
}

Performance Optimization

1. Use Transform Properties

Transform properties (x, y, scale, rotate) are hardware-accelerated:

jsx
// ✅ Good - Hardware accelerated
<motion.div animate={{ x: 100, scale: 1.2 }} />

// ❌ Avoid - Triggers layout/paint
<motion.div animate={{ left: 100, width: 200 }} />
2. Individual Transform Properties

Motion supports individual transform properties for cleaner code:

jsx
// Individual properties (Motion feature)
<motion.div style={{ x: 100, rotate: 45, scale: 1.2 }} />

// Traditional (also supported)
<motion.div style={{ transform: "translateX(100px) rotate(45deg) scale(1.2)" }} />
3. Reduce Motion for Accessibility

Respect user preferences for reduced motion:

jsx
import { useReducedMotion } from "framer-motion"

function Component() {
  const shouldReduceMotion = useReducedMotion()

  return (
    <motion.div
      animate={{ x: 100 }}
      transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.5 }}
    />
  )
}
4. Layout Animations Performance

Layout animations can be expensive. Optimize with:

jsx
// Specify what to animate
<motion.div layout="position" />  // Only position, not size

// Optimize transition
<motion.div
  layout
  transition={{
    layout: { duration: 0.3, ease: "easeOut" }
  }}
/>
5. Use layoutId Sparingly

layoutId creates shared layout animations but tracks elements globally. Use only when needed.

Common Pitfalls

1. Forgetting AnimatePresence for Exit Animations

Problem: Exit animations don't work

jsx
// ❌ Wrong - No AnimatePresence
{show && <motion.div exit={{ opacity: 0 }} />}
jsx
// ✅ Correct - Wrapped in AnimatePresence
<AnimatePresence>
  {show && <motion.div exit={{ opacity: 0 }} />}
</AnimatePresence>
2. Missing key Prop in Lists

Problem: AnimatePresence can't track elements

jsx
// ❌ Wrong - No key
<AnimatePresence>
  {items.map(item => <motion.div exit={{ opacity: 0 }} />)}
</AnimatePresence>
jsx
// ✅ Correct - Unique keys
<AnimatePresence>
  {items.map(item => (
    <motion.div key={item.id} exit={{ opacity: 0 }} />
  ))}
</AnimatePresence>
3. Animating Non-Transform Properties

Problem: Janky animations, poor performance

jsx
// ❌ Avoid - Not hardware accelerated
<motion.div animate={{ top: 100, left: 50, width: 200 }} />
jsx
// ✅ Better - Use transforms
<motion.div animate={{ x: 50, y: 100, scaleX: 2 }} />
4. Overusing Layout Animations

Problem: Performance issues with many layout-animated elements

jsx
// ❌ Too many layout animations
{items.map(item => <motion.div layout>{item}</motion.div>)}
jsx
// ✅ Use layout only where needed, optimize others
{items.map(item => (
  <motion.div
    key={item.id}
    animate={{ opacity: 1 }}  // Cheaper animation
    exit={{ opacity: 0 }}
  />
))}
5. Not Using Variants for Complex Animations

Problem: Duplicated animation code, no child orchestration

jsx
// ❌ Repetitive
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />
jsx
// ✅ Use variants
const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 }
}

<motion.div variants={variants} initial="hidden" animate="visible" />
<motion.div variants={variants} initial="hidden" animate="visible" />
6. Incorrect Transition Timing

Problem: Transitions don't apply to specific gestures

jsx
// ❌ Wrong - General transition won't apply to whileHover
<motion.div
  whileHover={{ scale: 1.2 }}
  transition={{ duration: 1 }}  // This applies to animate prop, not whileHover
/>
jsx
// ✅ Correct - Transition in whileHover or separate gesture transition
<motion.div
  whileHover={{
    scale: 1.2,
    transition: { duration: 0.2 }  // Applies to hover start
  }}
  transition={{ duration: 0.5 }}  // Applies to hover end
/>

Resources

Official Documentation
Bundled Resources

This skill includes:

references/

  • api_reference.md - Complete Motion API reference
  • variants_patterns.md - Variant patterns and orchestration
  • gesture_guide.md - Comprehensive gesture handling guide

scripts/

  • animation_generator.py - Generate Motion component boilerplate
  • variant_builder.py - Interactive variant configuration tool

assets/

  • starter_motion/ - Complete Motion + Vite starter template
  • examples/ - Real-world Motion component patterns
Community Resources

© AnastasiyaW, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 16 other files (scripts, references, assets) in skills/frontend/motion-framer of AnastasiyaW/codex-claude-code-config.

  • SKILL.md
  • LICENSE
  • assets/examples/README.md
  • assets/starter_motion/README.md
  • assets/starter_motion/index.html
  • assets/starter_motion/package.json
  • assets/starter_motion/src/App.css
  • assets/starter_motion/src/App.jsx
  • assets/starter_motion/src/components/DraggableBox.jsx
  • assets/starter_motion/src/components/HoverCard.jsx
  • assets/starter_motion/src/components/StaggerList.jsx
  • assets/starter_motion/src/main.jsx
  • assets/starter_motion/vite.config.js
  • references/api_reference.md
  • scripts
  • … and 2 more

Open the folder on GitHubat commit e71c6a8

Used in 1 other repository

We found 4 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in AnastasiyaW/codex-claude-code-config, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Motion Framer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Motion Framer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Motion Framer this skillAnastasiyaW/codex-claude-code-config1541 repos~5.2kAutomated safety check: PassMIT
Motionsoftmaple/softmaple159—~1.1kAutomated safety check: PassApache-2.0
Motiscope RecreateKumarSashank/motiscope122—~2kAutomated safety check: PassMIT
RecreateKumarSashank/motiscope122—~1.8kAutomated safety check: NotesMIT
Gsap Framer Scroll Animationgithub/awesome-copilot40k1 repos~1.6kAutomated safety check: PassMIT
GSAP Core Animationgreensock/gsap-skills16k4 repos~3.7kAutomated safety check: PassMIT

Similar skills

  • Motion

    softmaple/softmaple

    Animation skill for Motion (prev Framer Motion) and CSS animation.

    159 GitHub stars~1.1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Motiscope Recreate

    KumarSashank/motiscope

    Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.

    122 GitHub stars~2k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Recreate

    KumarSashank/motiscope

    Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.

    122 GitHub stars~1.8k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check: notes

  • Gsap Framer Scroll Animation

    github/awesome-copilot

    Official

    A skill your agent uses whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion…

    40k GitHub starsUsed in 1 repo~1.6k tokens
    Frontend & DesignAuto-check passed

  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 4 repos~3.7k tokens
    Frontend & DesignAuto-check passed

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    261 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

More from AnastasiyaW/codex-claude-code-config

All 50 skills in this repo

  • Bug Reproducer

    AnastasiyaW/codex-claude-code-config

    Find likely software bugs in a codebase, rank concrete bug candidates, and prove or reject them with focused regression tests before proposing a fix.

    154 GitHub stars~4.1k tokensUpdated today
    Auto-check passed

  • Proof Verify

    AnastasiyaW/codex-claude-code-config

    Plan-based verification - freeze acceptance criteria before building, then verify after with an independent fresh-context agent (the builder must not verify their own work).

    154 GitHub stars~2.6k tokensUpdated today
    Auto-check passed

  • Workflow Orchestration

    AnastasiyaW/codex-claude-code-config

    Написание и запуск Claude Code dynamic workflows (JS-оркестратор субагентов).

    154 GitHub stars~3.8k tokensUpdated today
    Auto-check passed

  • Notebooklm Grounded Research

    AnastasiyaW/codex-claude-code-config

    A skill your agent uses when: NotebookLM, notebooklm MCP, large documentation sets, courses, books, papers, or citation-backed research are mentioned.

    154 GitHub stars~2.4k tokensUpdated today
    Auto-check: warnings

  • Deepseek Provider Contract

    AnastasiyaW/codex-claude-code-config

    Validate a proposed DeepSeek API integration before any key or project context is sent: check thinking-mode tool-call history, strict-schema assumptions, bounded output, and provider data boundaries.

    154 GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Desktop Sessions Discovery

    AnastasiyaW/codex-claude-code-config

    Discover, search, and selectively restore Claude desktop app sessions hidden across multiple accountIds.

    154 GitHub stars~2.4k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Motion Framer

What does Motion Framer do?

A skill your agent uses when implementing Motion or Framer Motion in React/JavaScript: interactive UI components, micro-interactions, gestures, layout or page transitions, and scroll-based animation. Motion Framer is an agent skill from AnastasiyaW/codex-claude-code-config. Use when implementing Motion or Framer Motion in React/JavaScript: interactive UI components, micro-interactions, gestures, layout or page transitions, and scroll-based animation.

When should I use Motion Framer?

Motion Framer fits situations like: implementing Motion; framer Motion in React/JavaScript: interactive UI components; micro-interactions; page transitions.

How do I install Motion Framer in Claude Code?

Run `npx skills add AnastasiyaW/codex-claude-code-config --skill motion-framer -a claude-code`. Or copy the skill folder (skills/frontend/motion-framer in AnastasiyaW/codex-claude-code-config) into .claude/skills/motion-framer in your project. Claude Code loads it when a task matches its description.

How do I install Motion Framer in Codex?

Run `npx skills add AnastasiyaW/codex-claude-code-config --skill motion-framer -a codex`. Or copy the skill folder (skills/frontend/motion-framer in AnastasiyaW/codex-claude-code-config) into .agents/skills/motion-framer in your project. Codex loads it when a task matches its description.

Can I use Motion Framer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AnastasiyaW/codex-claude-code-config --skill motion-framer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/motion-framer, .gemini/skills/motion-framer, .github/skills/motion-framer and .opencode/skills/motion-framer in your project.

What does Motion Framer need to run?

Going by SKILL.md and its folder, Motion Framer needs JavaScript for the scripts in its folder. Our summary lists: Node.js.

Does Motion Framer access the network?

SKILL.md names 5 domains. As links in the text: motion.dev, framer.com, github.com, discord.gg and codesandbox.io. This is read from the text; nothing was executed.

Is Motion Framer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Motion Framer use?

Motion Framer is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Motion Framer use?

About 5.2k tokens (SKILL.md is roughly 21k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.1k tokens, read only when the agent opens those files.

What are the alternatives to Motion Framer?

Skills that share tags, products or a category with Motion Framer: Motion (softmaple/softmaple, 159 stars), Motiscope Recreate (KumarSashank/motiscope, 122 stars), Recreate (KumarSashank/motiscope, 122 stars) and Gsap Framer Scroll Animation (github/awesome-copilot, 40k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Motion Framer?

AnastasiyaW (a GitHub user) maintains it in AnastasiyaW/codex-claude-code-config, which has 154 GitHub stars. The repository holds 50 skills in this directory. The repository was last updated on October 7, 2026.

Source: AnastasiyaW/codex-claude-code-config on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.