Animations Agent Skill
Framer Motion — transitions, scroll animations, layout animations.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: Framer Motion — transitions, scroll animations, layout animations.
homepage: https://yepapi.com/skills/animations
metadata:
tags: [animation, framer-motion, transitions, motion]
---
# Animations
## Rules
- Use Framer Motion for React — `motion.div` with `initial`, `animate`, `exit` props
- `AnimatePresence` for mount/unmount animations — wrap conditional renders
- `layout` prop for automatic layout animations (reorder, resize)
- Scroll animations: `useScroll()` + `useTransform()` for parallax and scroll-triggered reveals
- Respect reduced motion: `useReducedMotion()` hook — disable non-essential animations
- Stagger children: `variants` with `staggerChildren` for list animations
- Performance: animate `transform` and `opacity` only — never animate `width`, `height`, `margin`
- Keep durations short: 200-400ms for UI transitions, 400-800ms for page transitions
## Avoid
- Animating layout properties (width, height, top, left) — use `transform: translate/scale`
- Animations longer than 1s for UI interactions — feels sluggish
- Auto-playing animations without user trigger — disorienting
- Ignoring `prefers-reduced-motion` — accessibility requirementInstall
Why Use the Animations Skill?
Without this skill, your AI guesses at animations patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the Animations skill installed. Your AI knows the context and writes code that fits.
"Add smooth page transitions and scroll-triggered animations with Framer Motion"
"Create a hero section with staggered text reveal and parallax background effects"
"Build an animated card grid with hover effects and layout transitions"
Works Great With
Animations skill — FAQ
It provides Framer Motion patterns for transitions, scroll animations, and layout animations. Your AI generates smooth, performant animations with proper enter/exit states and gesture handling.
Run `npx skills add YepAPI/skills --skill animations` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
It uses Framer Motion (JavaScript) for complex animations like layout transitions, gestures, and scroll-triggered effects. For simple transitions, it recommends CSS with Tailwind's transition utilities.