home / skills / dylantarre / animation-principles / universal-solutions

universal-solutions skill

safe

/skills/12-by-problem-type/universal-solutions

This skill helps diagnose animation problems using all 12 Disney principles to guide precise fixes and improvements.

npx playbooks add skill dylantarre/animation-principles --skill universal-solutions

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

3.1 KB

---
name: universal-solutions
description: Use when facing any animation problem as a comprehensive diagnostic framework
---

# Universal Animation Solutions

A complete diagnostic framework using all 12 Disney principles.

## The 12 Principles Checklist

Run through each principle to diagnose any animation problem:

### 1. Squash and Stretch
**Check**: Is there appropriate flexibility?
**Problem sign**: Rigid, lifeless motion
**Fix**: Add subtle scale changes on impact/acceleration

### 2. Anticipation
**Check**: Is there buildup before action?
**Problem sign**: Actions feel sudden or surprising
**Fix**: Add small reverse movement or wind-up

### 3. Staging
**Check**: Is the important thing clear?
**Problem sign**: Users miss key information
**Fix**: Isolate animated element, reduce competing motion

### 4. Straight Ahead vs Pose-to-Pose
**Check**: Is the approach right for the effect?
**Problem sign**: Uncontrolled or too rigid motion
**Fix**: Use keyframes for UI; frame-by-frame for organic

### 5. Follow Through
**Check**: Do things settle naturally?
**Problem sign**: Abrupt, mechanical endings
**Fix**: Add overshoot and settle, or soft deceleration

### 6. Slow In and Slow Out
**Check**: Is there proper easing?
**Problem sign**: Robotic, linear motion
**Fix**: Apply ease-out for entrances, ease-in for exits

### 7. Arcs
**Check**: Is the motion path natural?
**Problem sign**: Unnatural straight-line movement
**Fix**: Add curved paths for organic motion

### 8. Secondary Action
**Check**: Do supporting elements enhance?
**Problem sign**: Flat, one-dimensional animation
**Fix**: Add subtle complementary movements

### 9. Timing
**Check**: Is the speed appropriate?
**Problem sign**: Too fast or too slow
**Fix**: Micro: 100-200ms, Transitions: 200-400ms

### 10. Exaggeration
**Check**: Is the drama level right?
**Problem sign**: Too subtle or too dramatic
**Fix**: Match exaggeration to context importance

### 11. Solid Drawing
**Check**: Is rendering correct?
**Problem sign**: Visual glitches, distortion
**Fix**: Use transform/opacity only, check GPU layers

### 12. Appeal
**Check**: Does it feel right?
**Problem sign**: Hard to articulate wrongness
**Fix**: Align motion with brand/emotional intent

## Quick Diagnostic

1. **Describe the problem** in one sentence
2. **Identify which principle** relates most directly
3. **Check adjacent principles** (problems cluster)
4. **Apply targeted fix** from that principle

## Master Troubleshooting Checklist

- [ ] Does animation serve a purpose?
- [ ] Is timing appropriate (usually 150-300ms)?
- [ ] Is easing applied (not linear)?
- [ ] Does it respect `prefers-reduced-motion`?
- [ ] Is only transform/opacity being animated?
- [ ] Is motion guiding attention correctly?
- [ ] Does it match brand/emotional context?
- [ ] Can users complete tasks without it?
- [ ] Test on slowest target device
- [ ] Get user feedback with emotional vocabulary

## When to Remove Animation

Remove animation entirely if:
- It doesn't serve clear purpose
- Users complain or skip it
- It delays task completion
- It causes accessibility issues
- Performance is unacceptable
- You can't articulate why it exists

Overview

This skill is a compact diagnostic framework that applies all 12 classic animation principles to fix motion problems quickly. It helps you identify why an animation feels wrong and prescribes targeted fixes tied to each principle. Use it to audit, troubleshoot, or design animations that are clear, performant, and emotionally appropriate.

How this skill works

Run a quick checklist across the twelve principles (squash & stretch, anticipation, staging, etc.) to locate the root cause of an issue. For each failing principle it suggests a concrete corrective action and nearby principles to re-check. It also provides a short diagnostic flow and a master troubleshooting checklist for performance and accessibility concerns.

When to use it

Diagnosing an animation that feels lifeless, jarring, or unclear
Designing UI transitions to match brand tone and task flow
Fixing performance or accessibility regressions tied to motion
Deciding whether to remove or simplify an animation
Optimizing animation timing and easing across devices

Best practices

Start by writing a one-sentence problem description before diving into fixes
Check timing and easing first—many issues are resolved by micro adjustments (100–400ms)
Animate only transform and opacity when possible for GPU efficiency
Respect prefers-reduced-motion and test on slowest target devices
Validate motion with user feedback using emotional vocabulary (confident, calm, playful)

Example use cases

A button interaction feels robotic — run the checklist, add slow-in/slow-out and small follow-through
Complex modal transitions hide the focal element — apply staging and reduce competing motion
Micro-interactions feel too slow or fast — tune timing to 100–400ms depending on importance
Animations cause jank on low-end phones — restrict to transform/opacity and test on slow devices
Designers unsure if an animation is necessary — use the removal criteria to decide

FAQ

What is the fastest way to diagnose an animation problem?

Describe the problem in one sentence, pick the single most related principle, then check adjacent principles and apply the targeted fix.

What timing ranges should I use for UI animations?

Micro interactions: ~100–200ms. Common transitions: ~200–400ms. Use context and adjust with easing for perceived speed.

When should I remove animation entirely?

Remove it if it has no clear purpose, delays tasks, causes accessibility issues, degrades performance, or users consistently avoid it.