attention-grabbers
Attention-Grabbing Animations
Apply Disney's 12 principles to focus-drawing motion.
Principle Application
Squash & Stretch: Pulsing scale draws attention. 1.0 → 1.1 → 1.0 cycle catches peripheral vision.
Anticipation: Brief pause before attention animation. Let it build then release.
Staging: Position attention elements where users will see them. Corner badges, inline highlights.
Straight Ahead vs Pose-to-Pose: Design attention states: rest, active/pulsing, acknowledged.
Follow Through & Overlapping: Badge pulses, then count updates. Stagger the attention signals.
Slow In/Slow Out: Ease in/out on pulses. Smooth oscillation is less jarring than sharp bounces.
Arcs: Shake animations follow arc patterns. Left-right with slight vertical oscillation.
More from dylantarre/animation-principles
mobile-touch
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
1.6Kvideo-motion-graphics
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
617motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
552micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
439saas-productivity
Use when designing animations for business tools, project management, collaboration software, or productivity apps
292game-designer
Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.
287