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 One animation at a time - Sequence, don't parallelize Stagger by importance - Most important animates first Reduce decorative motion - Background should be calm Increase CTA animation contrast - Stands out from surroundings 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 Priority Animation Style Primary Fast, prominent, potentially looping Secondary Medium speed, one-time Tertiary Slow, subtle, or static Background Very slow or no animation