Secondary Action Mastery

This teaches you the difference between animation that works and animation that feels alive. The core insight is subordination: secondary actions like a button's ripple effect or a character's arm swing must enrich the primary motion without competing for attention. You get practical amplitude guidelines (10-20% for professional interfaces, 50-60% for games), the crucial distinction between secondary and overlapping action, and the "remove and test" method to validate your choices. What's valuable here is the implementation heuristic at the end: for every primary action, ask what else would be moving, add the single most valuable secondary action, then time it to offset from the primary. It's the kind of framework that stops you from either over-animating everything or leaving interfaces feeling dead.

skills.sh installs: 551
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill secondary-action-mastery --agent claude-code

Installs into .claude/skills of the current project.

Files

Secondary Action Mastery

The Enrichment Principle

Secondary action adds life to a scene without distracting from the main action. A character walking (primary) while whistling and swinging their arms (secondary). A button pressing (primary) with a subtle ripple effect (secondary). It's the difference between functional animation and rich, immersive motion.

Core Theory

Subordination principle: Secondary action must never compete with primary action. If viewers watch the secondary instead of primary, you've failed. The supporting role must remain supporting.

Reinforcement function: Good secondary action reinforces the primary action's meaning. It doesn't just add motion—it adds dimension to the story being told.