# 080104 Motion Animation

> Motion design and animation: timing, easing, spring physics, micro-interactions, reduced motion, and performance for frontend interfaces.

- Skill: `natuleadan/080104-motion-animation` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add natuleadan/080104-motion-animation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/natuleadan/080104-motion-animation/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: natuleadan (https://skillmd.com/u/natuleadan)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/natuleadan/080104-motion-animation

---


# Motion & Animation Principles

Animation and motion design for frontend interfaces — timing, easing, physics, micro-interactions, and performance. Covers both brand (expressive) and product (task-serving) motion.

## References

| Topic | File |
|---|---|
| Timing values, easing curves, CSS/JS implementations, platform standards | [references/timing-easing.md](references/timing-easing.md) |
| Spring physics, spatial continuity, shared transitions, reduced motion, interruption handling | [references/motion-principles.md](references/motion-principles.md) |
| Press feedback, ripple, skeleton, toast, toggle, dropdown, focus, tabs, progress | [references/micro-interactions.md](references/micro-interactions.md) |

## Core Rules

- **Timing**: Micro-interactions 150-300ms. Complex transitions ≤400ms. Exit 60-70% of enter. Stagger 30-50ms per item.
- **Easing**: Ease-out for entering (exponential: quart/quint/expo), ease-in for exiting. No bounce, no elastic, no linear for UI.
- **Performance**: Animate transform/opacity only. Never width/height/top/left. Interruptible animations. 60fps (~16ms/frame).
- **Reduced motion**: Respect `prefers-reduced-motion`. Data readable immediately. No orchestrated page-load sequences.
- **Product vs Brand**: Product = 150-250ms, conveys state only. Brand = more expressive, spring physics, stagger, shared elements.

## When to Use

- Adding micro-interactions to buttons/toggles
- Designing page transitions
- Implementing loading animations
- Creating gesture feedback
- Reviewing motion performance
- Ensuring reduced-motion support