work it harder, make it better, do it faster, makes us stronger!
A sketchbook of 106 subtle web animations: save, toggle, validate, load, confirm, undo, and the small states in between.
I'm a big fan of micro-animations on the web. The quiet stuff: small actions, soft feedback, nothing trying to impress you. I see them everywhere, and I like them, so I put together something that works for me. Maybe it'll work for you, too.
Each mark draws itself. Looks written, not stamped.
Click or drag. Soft blooms where you touch.
A quiet pulse with a fading ring. Presence, not alarm.
Underline grows from the center, not left to right.
Same curve on every bar, different timings. They never march.
Noise settles left to right into a real line.
Border highlight only while you hover.
Press, then a wipe swaps the label.
Click to fan the cards open or closed.
A soft spotlight follows the cursor over the text.
Keeps scrolling until you hover, then it pauses.
Columns roll to the new digits on the same ease.
Departure-board reels, staggered tile by tile.
Lines fill, nodes pop. Hit Advance to step.
One stroke draws the path, then stops.
A light bar sweeps while you hover.
Letters come in one after another.
The chip drifts toward your pointer, then returns.
Blur clears into sharp type. No bounce.
Two labels crossfade past each other.
Idle, spinner, then check + Saved. No page jump.
Toggle with a tiny overshoot so it feels settled.
Box scales in, check draws. Better than an instant flip.
Label turns into Copied when it works.
Label lifts on focus so it stays visible while you type.
Bad input shakes. Good input just gets a quieter border.
Content fades up once the placeholder has done its job.
Shimmer holds the space, then content fades in.
Tooltip fades up on hover or focus.
Count bumps a little when it changes.
Chips shrink away when you remove them.
Fills and pops right away, before the server answers.
Saving… blinks, then Saved. Handy for autosave.
Height animates with 0fr → 1fr so related content can stay tucked away until needed.
Extra controls stay tucked away until you ask.
Short undo window after delete. Beats a confirm dialog most days.
Pill slides under the choice. Cleaner than radio dots here.
Clear only shows up once there is text.
Live count. Pulses when you get near the limit.
Pin twists into place when it sticks.
Border traces while it publishes, then a soft Published pulse.
Check slides in. Done, without a modal.
Row actions wait for hover or focus.
Ink bar slides between tabs.
Hold until the fill finishes, then delete. Soft red settle on success.
List items come in one by one.
Timer drains so you know when the toast will leave.
Three dots bob. Busy, not a finished message.
Fail shakes and stays clickable. Success just settles.
Burger to close, plus to close, burger to back.
Hover previews the rating. Click locks gold.
Soft pulse when online. Color shift when it drops.
Indeterminate bar for unknown wait times. No fake percent.
Value only shows while you drag.
Inbox-style badge, but the count drops in.
Dots for each step. Makes long forms feel shorter.
Sound waves fade, X draws in. Click to hear a beep.
Rows slide into the gap while you drag.
Misses collapse as you type. List stays still.
Bar + percent, then Done when it finishes.
Grows with your text and keeps it until Reset. Survives reload too.
Approaching your plan limit.
Fills as you use quota. Tip fades in near the limit on a reserved line.
Main action is one click. Chevron hides the quieter ones.
Color + a short ping. No toast spam.
Banner offers restore. Better than losing the draft quietly.
Hit Enter and it becomes a chip right there.
Empty state gives way to the first real item.
Gets louder in color and copy as the deadline nears.
Fade edges only when there is more to scroll.
Edit shows a save strip. Dirty, but no dialog in your face.
One check sent, two checks seen.
Empty required field does a quick buzz.
Notices stack like toasts. Open them to fan out.
First click asks. Second click commits in red.
Thin strip when you go offline. No modal.
Arrow flips with sort. List softens while it reorders.
Old price crosses out while the new one counts to $29.
After send, the border traces while the cooldown runs.
Each step bumps the number a bit.
Reactions fan up. Pick one and it collapses onto the button.
CTA rises near the end of the scroll.
Slash draws over the eye as the field type flips.
Digits pop in and focus moves. Paste fills everything.
Rename opens a field under the title.
just now turns into 1m ago on its own.
Search icon opens into a field when you need it.
Valid field: soft border + a drawn check.
Open a row and the unread dot becomes a check.
Spins while syncing, then says Synced.
Number eases up to the target.
Ghost text ahead of the caret. Tab or click to take it.
Opens softly. Type, arrow, Enter.
Long paths hide the middle behind …
Rings pulse while you record.
New line grows into the diff instead of just flashing green.
Pick a slot and it fills from the bottom.
Thumb opens into the full preview from where it sat.
Select rows and a bulk bar shows up.
Pill slides. Staging is amber, production goes green.
Accept becomes Joined without leaving the page.
Risky flag turns the row amber and gives it a nudge.
Stages light up along the wire. Replay flips success and failure.
Highlight slides to the workspace you pick.
Can we ship without the banner?
Yes. Hide it behind the flag and merge after QA.
Resolve folds the thread away.
Paste a URL and a preview grows under it.
Empty seats fill in as people join.
Thin bar follows required fields as you complete them.
Mention warms for a moment when someone is tagged.
