framer-motion

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 13ec33b09272 · 31 Oct 2026Report an issue or request a re-scan

• Publishercalesthio GitHub userOwner of the repository this skill is read from
• Source foldercalesthio/openmontage/.agents/skills/framer-motionThe exact folder we audited
• LicenceAGPL-3.0As the repository states it
• Commit pinned for this verdict13ec33b09272A new audit runs when the source changes
• Repository statusNot archivedLast push 2 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Use when implementing Disney's 12 animation principles with Framer Motion in React applications

---
name: framer-motion
description: Use when implementing Disney's 12 animation principles with Framer Motion in React applications
---

# Framer Motion Animation Principles

Implement all 12 Disney animation principles using Framer Motion's declarative React API.

## 1. Squash and Stretch

```jsx
<motion.div
  animate={{ scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] }}
  transition={{ duration: 0.3, times: [0, 0.5, 1] }}
/>
```

## 2. Anticipation

```jsx
<motion.div
  variants={{
    idle: { y: 0, scaleY: 1 },
    anticipate: { y: 10, scaleY: 0.9 },
    jump: { y: -200 }
  }}
  initial="idle"
  animate={["anticipate", "jump"]}
  transition={{ duration: 0.5, times: [0, 0.2, 1] }}
/>
```

## 3. Staging

```jsx
<motion.div animate={{ filter: "blur(3px)", opacity: 0.6 }} /> {/* bg */}
<motion.div animate={{ scale: 1.1, zIndex: 10 }} /> {/* hero */}
```

## 4. Straight Ahead / Pose to Pose

```jsx
<motion.div
  animate={{
    x: [0, 100, 200, 300],
    y: [0, -50, 0, -30]
  }}
  transition={{ duration: 1, ease: "easeInOut" }}
/>
```

## 5. Follow Through and Overlapping Action

```jsx
<motion.div animate={{ x: 200 }} transition={{ duration: 0.5 }}>
  <motion.span
    animate={{ x: 200 }}
    transition={{ duration: 0.5, delay: 0.05 }} // hair
  />
  <motion.span
    animate={{ x: 200 }}
    transition={{ duration: 0.6, delay: 0.1 }} // cape
  />
</motion.div>
```

## 6. Slow In and Slow Out

```jsx
<motion.div
  animate={{ x: 300 }}
  transition={{
    duration: 0.6,
    ease: [0.42, 0, 0.58, 1] // easeInOut cubic-bezier
  }}
/>
// Or use: "easeIn", "easeOut", "easeInOut"
```

## 7. Arc

```jsx
<motion.div
  animate={{
    x: [0, 100, 200],
    y: [0, -100, 0]
  }}
  transition={{ duration: 1, ease: "easeInOut" }}
/>
```

## 8. Secondary Action

```jsx
<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  <motion.span
    animate={{ rotate: [0, 10, -10, 0] }}
    transition={{ duration: 0.3 }}
  >
    Icon
  </motion.span>
</motion.button>
```

## 9. Timing

```jsx
const timings = {
  fast: { duration: 0.15 },
  normal: { duration: 0.3 },
  slow: { duration: 0.6 },
  spring: { type: "spring", stiffness: 300, damping: 20 }
};
```

## 10. Exaggeration

```jsx
<motion.div
  animate={{ scale: 1.5, rotate: 720 }}
  transition={{
    type: "spring",
    stiffness: 200,
    damping: 10 // low damping = overshoot
  }}
/>
```

## 11. Solid Drawing

```jsx
<motion.div
  style={{ perspective: 1000 }}
  animate={{ rotateX: 45, rotateY: 30 }}
  transition={{ duration: 0.5 }}
/>
```

## 12. Appeal

```jsx
<motion.div
  whileHover={{
    scale: 1.02,
    boxShadow: "0 20px 40px rgba(0,0,0,0.2)"
  }}
  transition={{ duration: 0.3 }}
/>
```

## Stagger Children

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

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

## Key Framer Motion Features

- `animate` - Target state
- `variants` - Named animation states
- `whileHover` / `whileTap` - Gesture animations
- `transition` - Timing and easing
- `AnimatePresence` - Exit animations
- `useAnimation` - Programmatic control
- `layout` - Auto-animate layout changes

Excerpt, first 3,281 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/calesthio/openmontage
git -C openmontage checkout 13ec33b09272

Works in

1. 2026-10-31
   ✓SAFE B 89 / 100

   first audit · source 13ec33b09272

Questions about framer-motion

• github.com/calesthio/openmontage/tree/main/.agents/skills/framer — the audited source at commit 13ec33b09272 and every finding aboveObserved · 31 Oct 2026

Spotted something wrong? Report a correction · Methodology