Skip to content
Agentmart
Submit a tool

animations

Framer Motion — transitions, scroll animations, layout animations.

Skill by YepAPI

IndexedMIT★ 8
Write a review

Install

Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install skill/yepapi-animations

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

Framer Motion — transitions, scroll animations, layout animations.

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools
No tools found
Secrets
None asked for
Install scripts
None found

Network hosts it talks to 1

  • codeload.github.com · found in install command

Files it touches

  • ~/.claude/skills/animations

What's inside

Skill name
animations
Description
Framer Motion — transitions, scroll animations, layout animations.
License
MIT
Instructions
21 lines in SKILL.md · view on GitHub

Files (2)

  • README.md
  • SKILL.md

SKILL.md (first lines)

# 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 requirement

From YepAPI/skills, MIT.

More from YepAPI/skills

Signals

Stars
8
Forks
1
Open issues
0
Last commit (this folder)
Apr 12, 2026 (6 months ago)

From GitHub (fetched Oct 24, 2026).

Details

License
MIT
Repository
github.com/YepAPI/skills
First seen
Oct 24, 2026
Last checked
Oct 24, 2026
Source
GitHubgithub-graphql

More from YepAPI

Cite this page

animations skill. Agent Mart. https://agentmart.dev/skills/yepapi-animations (last updated 2026-10-24)