# Framer Motion Interactions

> Implement interface animation and micro-interactions that feel intentional — hover states, layout transitions, page transitions, and spring physics — without layout shift or frame drops. Use this skill when writing animation code in a running app.

- Skill: `10xequity/framer-motion-interactions` (Agent Skill)
- Install (CLI): `npx skillmds@latest add 10xequity/framer-motion-interactions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/10xequity/framer-motion-interactions/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: 10xequity (https://skillmd.com/u/10xequity)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/10xequity/framer-motion-interactions

---


# Framer Motion Interactions Skill

## Purpose
Implement interface animation and micro-interactions that feel intentional — hover states, layout transitions, page transitions, and spring physics — without layout shift or frame drops.

## When to use
Use this skill when writing animation code in a running app. Use `motion-design.md` to decide what should move and why; use this to build it.

## Inputs
- the component or route to animate
- the interaction being expressed (state change, navigation, feedback, attention)
- motion direction or brand tone
- performance budget and target devices

## Output
Return:
- the animation implementation with variants and transitions
- a timing and easing table for the interaction set, so values stay consistent
- reduced-motion fallbacks
- notes on what was deliberately left unanimated

## Constraints
- animate only `transform` and `opacity` on the hot path; animating layout properties causes jank
- durations: 100–200ms for state feedback, 200–400ms for entrances and transitions, above 500ms only for a deliberate showpiece
- use spring physics for anything that follows a gesture or pointer; use eased curves for choreographed sequences
- `layout` and `layoutId` are expensive — scope them to the element that actually moves
- stagger children instead of animating a list as one block, but cap total sequence length
- reserve space for entering content; never let animation cause cumulative layout shift
- honour `prefers-reduced-motion` — reduce to opacity or none, never leave content unreachable
- no animation on an element that carries an urgent error or validation message

## Examples
- Add hover and press states to a card grid without layout shift
- Build a route transition that preserves a shared element
- Replace scattered CSS transitions with one consistent motion token set