Ui Animation

This one walks you through UI animation like a proper motion design reference. You get timing guidelines broken down by use case (instant for toggles, 200-300ms for most transitions), easing functions with actual cubic-bezier values, and the classic 12 principles adapted for interfaces. The micro-interaction patterns are specific: button hover scales to 1.02 in 100ms, list items stagger at 50ms intervals. It covers the FLIP technique for performant reordering and clearly marks which CSS properties are GPU-accelerated versus layout-thrashing. Good for when you need to justify animation decisions with real numbers instead of just eyeballing it.

skills.sh installs: 296
GitHub stars: 108
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add travisjneuman/.claude --skill ui-animation --agent claude-code

Installs into .claude/skills of the current project.

Files

UI Animation & Motion Design

Comprehensive guide for creating purposeful, performant animations in user interfaces.

Animation Principles

The 12 Principles of Animation (Applied to UI)

Principle	UI Application
Timing	Duration reflects importance/distance
Easing	Natural acceleration/deceleration
Anticipation	Visual preparation for action
Follow-through	Momentum continues after stop
Secondary Action	Supporting elements respond
Staging	Draw attention to key element
Squash & Stretch	Bouncy, playful interactions
Exaggeration	Emphasize important feedback
Arc	Natural curved motion paths
Overlap	Elements move at different rates
Solid Drawing	Maintain consistent 3D space
Appeal	Engaging, delightful motion