Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Framer Motion Skill · aiskillstore | DecimalAI

aiskillstore/framer-motion

SkillScore86Maintained

Comprehensive Framer Motion animation library for React. Covers motion components, variants, gestures, page transitions, and scroll animations. Use when adding animations to React/Next.js applications.

Frontendby aiskillstore

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/aiskillstore-framer-motion/SKILL.md

decimalai skills pull aiskillstore-framer-motion --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/aiskillstore-framer-motion/SKILL.md https://app.decimal.ai/s/aiskillstore-framer-motion/SKILL.md

Raw file: /s/aiskillstore-framer-motion/SKILL.md ↗ · machine-readable summary at /s/aiskillstore-framer-motion.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 19d ago

Yes — +18% lift · at higher cost+52% tokens0% turns86% of whole cases pass with skill (19/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-11	✗→✓	▲ Improved	57%	0%
case-06	✗→✓	▲ Improved	93%	0%
case-07	✗→✓	▲ Improved	84%	0%
case-01	✗→✓	▲ Improved	116%	0%
case-17	✗→✓	▲ Improved	35%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

aiskillstore / marketplace

skills/asmayaseen/framer-motion/SKILL.md

View on GitHub ↗

Imported 8/10/2026Version v1Bundled 2 files

Skill contents

templates/

SKILL.md

Framer Motion Skill

Production-ready animations for React applications.

Quick Start

Installation

bash
npm install framer-motion
# or
pnpm add framer-motion

Basic Usage

tsx
import { motion } from "framer-motion";

// Simple animation
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
>
  Content
</motion.div>

Core Concepts

| Concept | Guide | |---------|-------| | Motion Component | reference/motion-component.md | | Variants | reference/variants.md | | Gestures | reference/gestures.md | | Hooks | reference/hooks.md |

Examples

| Pattern | Guide | |---------|-------| | Page Transitions | examples/page-transitions.md | | List Animations | examples/list-animations.md | | Scroll Animations | examples/scroll-animations.md | | Micro-interactions | examples/micro-interactions.md |

Templates

| Template | Purpose | |----------|---------| | templates/page-transition.tsx | Page transition wrapper | | templates/animated-list.tsx | Animated list component |

Quick Reference

Basic Animation

tsx
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -20 }}
  transition={{ duration: 0.3 }}
>
  Content
</motion.div>

Hover & Tap

tsx
<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
  Click me
</motion.button>

Variants

tsx
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map(i => (
    <motion.li key={i} variants={item}>{i}</motion.li>
  ))}
</motion.ul>

AnimatePresence (Exit Animations)

tsx
import { AnimatePresence, motion } from "framer-motion";

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

Scroll Trigger

tsx
<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-100px" }}
  transition={{ duration: 0.5 }}
>
  Animates when scrolled into view
</motion.div>

Drag

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

Layout Animation

tsx
<motion.div layout layoutId="shared-element">
  Content that animates when layout changes
</motion.div>

Transition Types

tsx
// Tween (default)
transition={{ duration: 0.3, ease: "easeOut" }}

// Spring
transition={{ type: "spring", stiffness: 300, damping: 20 }}

// Spring presets
transition={{ type: "spring", bounce: 0.25 }}

// Inertia (for drag)
transition={{ type: "inertia", velocity: 50 }}

Easing Functions

tsx
// Built-in easings
ease: "linear"
ease: "easeIn"
ease: "easeOut"
ease: "easeInOut"
ease: "circIn"
ease: "circOut"
ease: "circInOut"
ease: "backIn"
ease: "backOut"
ease: "backInOut"

// Custom cubic-bezier
ease: [0.17, 0.67, 0.83, 0.67]

Reduced Motion

Always respect user preferences:

tsx
import { motion, useReducedMotion } from "framer-motion";

function Component() {
  const prefersReducedMotion = useReducedMotion();

  return (
    <motion.div
      initial={{ opacity: 0, y: prefersReducedMotion ? 0 : 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: prefersReducedMotion ? 0 : 0.3 }}
    >
      Respects motion preferences
    </motion.div>
  );
}

// Or use media query
const variants = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
};

<motion.div
  variants={variants}
  initial="initial"
  animate="animate"
  className="motion-reduce:transition-none"
>

Common Patterns

Fade In Up

tsx
const fadeInUp = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.4 }
};

<motion.div {...fadeInUp}>Content</motion.div>

Staggered List

tsx
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1, delayChildren: 0.2 }
  }
};

const item = {
  hidden: { opacity: 0, x: -20 },
  show: { opacity: 1, x: 0 }
};

Modal

tsx
<AnimatePresence>
  {isOpen && (
    <>
      {/* Backdrop */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 bg-black/50"
        onClick={onClose}
      />
      {/* Modal */}
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0.95 }}
        className="fixed inset-x-4 top-1/2 -translate-y-1/2 ..."
      >
        Modal content
      </motion.div>
    </>
  )}
</AnimatePresence>

Accordion

tsx
<motion.div
  initial={false}
  animate={{ height: isOpen ? "auto" : 0 }}
  transition={{ duration: 0.3, ease: "easeInOut" }}
  className="overflow-hidden"
>
  <div className="p-4">Accordion content</div>
</motion.div>

Best Practices

Use variants: Cleaner code, easier orchestration
Respect reduced motion: Always check useReducedMotion
Use layout sparingly: Can be expensive, use only when needed
Exit animations: Wrap with AnimatePresence
Spring for interactions: More natural feel for hover/tap
Tween for page transitions: More predictable timing
GPU-accelerated properties: Prefer opacity, scale, x, y over width, height

Illustrative Want to see what aiskillstore/framer-motion would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

9/2/2026, 16:31 UTC · 22 cases

Lift

+18%

86% vs 68%

Agent turns

1.0 vs 1.0

Tokens

+52%

4,025.55 vs 2,641.82

fail → pass · 6pass → pass · 13fail → fail · 1pass → fail · 2

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-11 I want an element on a landing page to animate into view only when the user scrolls down to it, but it should stay visible and not re-trigger if the user scrolls back up and down again.	fail→pass	14,778	15,481	+5%	1	1	0%	1,890	2,968	+57%	0	0	—
case-06 I have a list of items in React where each child should fade in and slide up sequentially with a slight delay between each item. Should I calculate CSS animation-delay inline for each child using index multiplication?	fail→pass	58,896	29,216	-50%	1	1	0%	1,984	3,827	+93%	0	0	—
case-07 When animating a card rising on scroll, what is the best way to handle users who have configured accessibility settings for reduced motion in their OS?	fail→pass	17,412	22,262	+28%	1	1	0%	2,306	4,237	+84%	0	0	—
case-08 I want to animate an expanding panel component's size. Should I animate CSS properties like width and height directly using spring transitions?	pass→pass	38,237	16,732	-56%	1	1	0%	2,232	4,049	+81%	0	0	—
case-09 How should a route page transition component be structured to ensure previous pages finish fading out before the new page enters?	pass→pass	21,078	19,298	-8%	1	1	0%	3,018	4,344	+44%	0	0	—
case-10 What props should be attached to an interactive button for hover scale and press feedback rather than using CSS :hover and :active pseudo-classes?	pass→pass	33,096	7,643	-77%	1	1	0%	2,244	3,197	+42%	0	0	—
case-01 How do I implement interactive action buttons in React using framer-motion? I want subtle scale feedback on mouse hover and click/press gestures driven by spring physics so the buttons feel responsive and natural.	fail→pass	132,794	80,322	-40%	1	1	0%	2,738	5,904	+116%	0	0	—
case-02 How do I write a pure CSS keyframe animation for a rotating loading spinner without any JavaScript or external libraries?	pass→pass	15,605	17,196	+10%	1	1	0%	1,711	3,240	+89%	0	0	—
case-03 How do I fetch data from a REST API inside a React component using useEffect and manage loading and error states?	pass→pass	36,196	69,222	+91%	1	1	0%	2,466	3,831	+55%	0	0	—
case-04 How do I configure a responsive flexbox grid layout with centered items using Tailwind CSS utility classes?	pass→pass	40,076	40,062	-0%	1	1	0%	3,138	4,097	+31%	0	0	—
case-05 I am building a React modal overlay component that needs to fade and scale in when opened, and smoothly animate out when closed. Standard conditional rendering removes the DOM node instantly before any closing animation finishes. How should this be handled?	pass→pass	27,726	29,835	+8%	1	1	0%	2,923	4,657	+59%	0	0	—
case-12 How can a draggable UI element in React be bounded within a bounding box of 100 pixels in all directions with subtle elastic pull resistance when reaching the edge?	pass→pass	17,596	12,072	-31%	1	1	0%	2,976	3,303	+11%	0	0	—
case-13 When switching active tab indicators across a navigation bar, how do I animate the background pill seamlessly between tab items without manually calculating DOM positions?	fail→fail	31,346	12,545	-60%	1	1	0%	3,049	4,220	+38%	0	0	—
case-14 What transition type and settings should be used for realistic physical feel during user interactions like button presses versus linear progress bars?	pass→pass	14,515	21,590	+49%	1	1	0%	2,897	4,684	+62%	0	0	—
case-15 How do you specify a custom 4-point cubic bezier curve array for easing in motion transition configurations?	pass→pass	17,781	9,998	-44%	1	1	0%	2,445	3,480	+42%	0	0	—
case-16 How can a collapsible accordion section animate smooth height expansion from zero to its dynamic content height in React without hardcoding a pixel max-height?	pass→pass	20,147	14,628	-27%	1	1	0%	2,883	4,902	+70%	0	0	—
case-17 How do you construct a modal dialog with a dim backdrop overlay where clicking the backdrop closes the modal, ensuring both backdrop and modal content animate out together?	fail→pass	22,796	20,149	-12%	1	1	0%	3,561	4,792	+35%	0	0	—
case-18 What built-in string values are available for configuring smooth deceleration curves like circular or back easings in transition objects?	pass→fail	17,643	11,179	-37%	1	1	0%	2,381	2,908	+22%	0	0	—
case-19 When orchestrating a staggered entrance animation, how do you delay the start of the children's staggered animation until after the main container finished fading in?	fail→pass	13,726	13,823	+1%	1	1	0%	2,308	3,676	+59%	0	0	—
case-20 How do you turn a standard HTML element like a div or button into an animated component capable of taking animation state props?	pass→pass	13,456	10,944	-19%	1	1	0%	2,631	3,808	+45%	0	0	—
case-21 When rendering a dynamic list where items can be reordered or removed, how do you ensure non-removed items smoothly slide into their new positions?	pass→pass	15,368	11,315	-26%	1	1	0%	3,011	4,135	+37%	0	0	—
case-22 How do you configure a drag transition so that releasing a dragged element maintains flicking momentum based on release speed?	pass→fail	18,641	16,035	-14%	1	1	0%	3,328	4,303	+29%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +18 percentage points is the difference between those two pass rates over the 22 comparable cases. 2 cases got worse with the skill loaded, and they are included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 68.2%
Pass rate with the skill: 86.4%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 2
Skill version measured: v1
Run completed: 9/2/2026, 16:31 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-11

Prompt

I want an element on a landing page to animate into view only when the user scrolls down to it, but it should stay visible and not re-trigger if the user scrolls back up and down again.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run86

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+50% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 19 days ago

Other measured skills in the registry, with their headline benchmark lift.