motion-framer

SKILL.md

Motion & Framer Motion

Overview

Motion (formerly Framer Motion) is a production-ready animation library for React and JavaScript that enables declarative, performant animations with minimal code. It provides motion components that wrap HTML elements with animation superpowers, supports gesture recognition (hover, tap, drag, focus), and includes advanced features like layout animations, exit animations, and spring physics.

When to use this skill:

Building interactive UI components (buttons, cards, menus)

Creating micro-interactions and hover effects

Implementing page transitions and route animations

Adding scroll-based animations and parallax effects

Animating layout changes (resizing, reordering, shared element transitions)

Drag-and-drop interfaces

Complex animation sequences and state-based animations

Replacing CSS transitions with more powerful, controllable animations