How to Animate a Success Checkmark
How to animate a checkmark that confirms an action: stroke drawing, timing, sequencing with the surrounding UI, and the accessibility signal it must not replace.
Core Takeaway
A success checkmark should confirm a completed action, not celebrate it. Draw the stroke in one smooth motion, or scale the shape from its own centre, and keep it short. Let the surrounding UI settle first, then play the mark. Always pair it with text or a live region, because an animated tick alone does not tell a screen reader that anything happened.
Decide what the mark is confirming
A checkmark after saving a form says the data was accepted. A checkmark after a payment says the payment went through. Those are different promises, and the animation should not imply more certainty than the system has. If the result is still pending, show the pending state first and only play the check when the outcome is real.
Draw the stroke instead of popping the shape
The most convincing checkmark animation traces the path. With SVG, set stroke-dasharray and stroke-dashoffset to the path length, then animate the offset to zero. The line appears to be written, which matches how people read a tick. Scaling the whole icon in is simpler and works fine, but it feels more like a sticker than a confirmation.
Sequence it with the container
The mark usually lives inside a button, a card or a dialog. If the container is still moving, the tick competes with it. Settle the container first, then draw the mark. A short handoff of a few frames is enough and reads as one event rather than two.
Keep it short
The user is waiting for permission to continue. A long success animation becomes an obstacle. Draw the stroke quickly, then let the interface move on. If the app stays on the screen, the mark can rest; it does not need a loop or a bounce.
Accessibility: say it, do not only show it
Screen reader users do not see the stroke. The success state needs text, an updated label, or a live region announcement. Also avoid a checkmark as the only difference between success and failure, since colour and shape alone are easy to miss.
Haptics and sound are optional
On mobile, a light haptic can reinforce the mark, and some apps add a short sound. Both should be optional and should respect system settings. Never make the animation the only confirmation that the action worked.
Production Implementation Snippet
/* Draw an SVG check by animating the dash offset */
.check path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: draw 320ms ease-out forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.check path {
animation: none;
stroke-dashoffset: 0;
}
}Key Principles to Remember
- Only play the success mark when the result is actually confirmed
- Drawing the SVG stroke reads better than popping the icon
- Settle the container, then animate the mark
- Keep it short, because the user is waiting to continue
- Announce success in text or a live region as well
Frequently Asked Questions
Sources
- stroke-dasharray — MDN Web Docs
- ARIA live regions — MDN Web Docs
- Understanding Success Criterion 2.3.3: Animation from Interactions — W3C WAI