Success Checkmark
Also called Animated success tick
A circle and tick draw themselves to confirm an action succeeded.
Use for
Form submit, payment done
Variants
- SVG stroke draw
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add a "Success Checkmark" animation (also called an animated success tick) to [where].
A circle should draw itself around in one smooth stroke, then the tick draws inside it and the whole mark gives a small, gentle pop: calm and confident.
Play it once when the action succeeds, pair it with a text message screen readers can announce, and show the finished mark right away for users who prefer reduced motion.Similar motions
Click to play
Checkbox Check Draw
Also called Animated checkbox, Checkmark draw
A checkmark is drawn stroke by stroke inside the box when it is ticked.
Use for
Forms, to-do lists
Add a "Checkbox Check Draw" animation (also called an animated checkbox or checkmark draw) to [where].
When the box is ticked it should fill with color and the checkmark should draw itself in one quick, smooth stroke; unticking erases it the same way.
Keep it a real checkbox with its checked state, working with the keyboard and a visible focus ring.Line Drawing
Also called Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
An SVG stroke appears to be drawn along its path as the dash offset animates.
Use for
Icons, logos, illustrations
Add a "Line Drawing" animation (also called path drawing or a self-drawing SVG) to [where].
Each stroke should appear to draw itself smoothly along its path from start to end, with a second stroke such as a checkmark following right after the first.
Play it once when it comes into view rather than looping, and show the fully drawn lines to users who prefer reduced motion.Click to play
Copy-to-Clipboard Feedback
Also called Copied state, Copy icon to checkmark
The copy icon morphs into a checkmark and the label reads Copied for a moment.
Use for
Code blocks, share links
Add a "Copy-to-Clipboard Feedback" animation (also called a copied state or copy icon to checkmark) to [where].
When the copy button is pressed, the copy icon should quickly shrink away as a checkmark draws in and the label changes to "Copied", then everything eases back after a short moment.
Keep the button the same size during the swap so nothing shifts, and announce the copied state to screen readers.Progress Ring
Also called Circular progress, Radial progress, Animated Circular Progress Bar
A circular arc grows around a ring to show percentage complete.
Use for
Uploads, goals, timers
Add a "Progress Ring" (also called circular progress or radial progress) to [where].
Starting at the top, an arc should grow clockwise around the ring to show the percentage complete, easing out as it settles, while the number in the center counts up alongside it.
Keep the arc and the number in sync, and expose the value with proper progress bar semantics for screen readers.More in Micro-interaction
Drag to play
Swipe to Delete
Also called Swipe actions, Swipe to reveal
Swiping a list row sideways reveals action buttons such as delete or archive.
Use for
Mail lists, to-do lists
Add a "Swipe to Delete" interaction (also called swipe actions or swipe to reveal) to [where].
Dragging a row sideways should slide it directly with the finger to uncover action buttons such as archive and delete behind it, stopping once they are fully shown, and on release it glides smoothly into place without bounce.
Keep vertical scrolling working while swiping horizontally, and make the same actions reachable by keyboard and screen readers without swiping.Click to play
Toggle Switch
Also called Switch, Switch Thumb Slide
A round knob slides along a track and the track color changes between off and on.
Use for
Settings, dark mode
Add a "Toggle Switch" animation (also called a switch) to [where].
When it is turned on or off, the round knob should slide smoothly to the other end of the track while the track color changes: quick and crisp, with no bounce.
Keep it a real accessible switch (role="switch" with its checked state) that also works with the keyboard.A
1
Click to play
Add to Cart Fly
Also called Fly to cart, Add-to-cart animation
The product image shrinks and flies along an arc into the cart icon.
Use for
E-commerce
Add an "Add to Cart Fly" animation (also called fly to cart or add-to-cart animation) to [where].
When the add button is pressed, a small copy of the product image should shrink as it flies along a smooth, quick arc into the cart icon, and the cart should give a small bump as its count updates.
Play it once per press without moving the original product card, and skip the flight for users who prefer reduced motion while still updating the cart.