Agent skill

animations-motion

Add smooth animations to buttons, page transitions, tasks, modals, and interactive elements.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/animations-motion

SKILL.md

Animations & Motion

Instructions

  1. Buttons

    • Hover scale/glow
    • Click ripple effect

  2. Page transitions

    • Fade and slide effects
    • Shared layout transitions for smooth navigation

  3. Tasks & Modals

    • Animate add, delete, complete
    • Input focus and validation animations

Best Practices

  • Keep animations subtle and purposeful
  • Optimize performance for all devices
  • Use Framer Motion or GSAP where appropriate

Didn't find tool you were looking for?

Be as detailed as possible for better results