Feedback Indicator Animations
Apply Disney's 12 principles to action confirmation animations.
Principle Application
Squash & Stretch: Success checkmarks can scale with overshoot. Compress on draw, expand on complete.
Anticipation: Brief gather before feedback appears. 50ms of preparation before the confirmation.
Staging: Feedback appears at the action location. Button shows checkmark, field shows validation.
Straight Ahead vs Pose-to-Pose: Define feedback states: neutral → processing → success/error.
Follow Through & Overlapping: Icon animates, then label appears. Stagger confirmation elements.
Slow In/Slow Out: Success: ease-out (confident arrival). Error: ease-in-out (shake settles).
Arcs: Checkmarks draw in arcs, not straight lines. Error X's cross naturally.
Secondary Action: Checkmark draws + color shifts + scale bounces for rich feedback.
Timing:
Instant feedback: 100-200ms (form validation) Success confirmation: 300-500ms (checkmark draw) Error indication: 400ms (shake + message) Auto-dismiss: 2000-4000ms after appearance
Exaggeration: Success deserves celebration. Overshoot scale to 1.2, bold colors, confident motion.
Solid Drawing: Feedback icons must be clear at a glance. Recognition in 100ms or less.
Appeal: Positive feedback should feel rewarding. Negative feedback firm but not punishing.
Timing Recommendations Feedback Type Duration Auto-dismiss Easing Inline Validation 150ms No ease-out Checkmark Draw 400ms 3000ms ease-out Success Toast 300ms 4000ms ease-out Error Shake 400ms No ease-in-out Error Toast 300ms 6000ms ease-out Save Indicator 200ms 2000ms ease-out Implementation Patterns / Checkmark draw / .checkmark { stroke-dasharray: 50; stroke-dashoffset: 50; animation: draw-check 400ms ease-out forwards; }
@keyframes draw-check { to { stroke-dashoffset: 0; } }
/ Success with scale / .success-icon { animation: success 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes success { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
/ Error shake / .error-shake { animation: shake 400ms ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/ Inline validation / .field-valid { animation: valid-pop 200ms ease-out; }
@keyframes valid-pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
SVG Checkmark Pattern
Auto-Dismiss Pattern // Show success, auto-hide element.classList.add('success-visible');
setTimeout(() => { element.classList.remove('success-visible'); element.classList.add('success-hidden'); }, 3000);
Key Rules Feedback must appear within 100ms of action Success states: celebrate briefly, don't linger Error states: persist until user acknowledges Always provide text alongside icons for accessibility prefers-reduced-motion: instant state, no animation