dylantarre/animation-principles/attention-management

Attention Management

Direct user focus correctly using Disney's principles.

Problem Indicators

• Users miss important content
• Decorative elements steal focus
• CTAs don't stand out
• Users look at wrong things first
• Information hierarchy is unclear

Diagnosis by Principle

Staging

Issue: Multiple elements compete for attention Fix: One thing moves at a time. Animate the most important element; keep others still.

Timing

Issue: Everything animates at same speed Fix: Primary content: faster animation. Secondary: slower or delayed. Speed implies importance.

Exaggeration

Issue: Uniform motion across hierarchy Fix: Important elements get more dramatic animation. Background elements get subtle motion.

Anticipation

Issue: No buildup directs eyes Fix: Use anticipation to guide attention. A small movement can draw eyes before the main action.

Appeal

Issue: Wrong elements are visually interesting Fix: Make important elements the most visually appealing. Animation should enhance hierarchy, not fight it.

Quick Fixes

1. One animation at a time - Sequence, don't parallelize
2. Stagger by importance - Most important animates first
3. Reduce decorative motion - Background should be calm
4. Increase CTA animation contrast - Stands out from surroundings
5. Use motion to guide reading order - Top-to-bottom, left-to-right

Troubleshooting Checklist

• [ ] What do users look at first? (Eye tracking or testing)
• [ ] Does animation sequence match importance hierarchy?
• [ ] Are decorative animations subtle enough?
• [ ] Does primary CTA have strongest motion?
• [ ] Count simultaneous animations (should be 1-2)
• [ ] Test: Hide animation—does hierarchy still work?
• [ ] Is motion guiding or distracting?
• [ ] Does stillness create emphasis where needed?

Code Pattern

/* Stagger by importance */
.hero-title {
  animation: fadeInUp 400ms ease-out;
}
 
.hero-subtitle {
  animation: fadeInUp 400ms ease-out 100ms backwards;
}
 
.hero-cta {
  animation: fadeInUp 400ms ease-out 200ms backwards,
             pulse 2s ease-in-out 1s infinite;
}
 
/* De-emphasize background */
.background-element {
  animation: subtleDrift 20s linear infinite;
  opacity: 0.3;
}

Hierarchy Through Motion