Motion

Appears and disappears through opacity alone. Nothing moves.

Slides in from the left, rests, then leaves to the right.

Grows from slightly smaller to full size while fading in.

Grows in, overshoots full size, then settles back.

The content holds still while an opening sweeps across it.

The toast rises in, rests, then slips out in less time.

Three fixed stops; the travel between them is filled in.

One glide between two ends; ticks mark it at equal time steps.

Five bars rise and fade in, each starting 60ms after the last.

The panel lands first, rows wipe in at 120ms, the dot at 280ms.

Two identical slides; the second starts 400ms after the first.

The same 120px slide at 120ms, 320ms and 800ms.

Two identical slides; one holds where it ends, one snaps back.

Six equal jumps along the ticks; the ghost glides the same path.

Moves 112px to the right, pauses, then drops 48px.

Grows from 0.6 to 1.4 and back; the outline marks full size.

Makes one full turn about its center, rests, then goes again.

Leans 18 degrees, holds, straightens; the outline stays upright.

Tilts in depth, then a half turn brings the back face around.

The same swing from two viewing distances, 1200px and 300px.

The same growth twice: pinned at center, pinned at bottom left.

The menu grows out of the button that opened it, then slips away.

One view fades out while the other fades in over the same window.

One rectangle glides and reshapes from list row to detail, and back.

The pill reshapes into a panel; the contents swap mid-move.

The thumbnail travels into the hero slot, growing on the way.

One row fades out and the rows below glide up into the gap.

The panel grows open first; the content fades in a beat behind.

Forward, the new pane enters from the right; back, from the left.

Rows fade in and rise 12px as they enter view, once each.

Scroll position sets the progress; scrolling back runs it in reverse.

The background moves at 0.4x the speed of the foreground.

One view drops 8px and fades out as the next rises into place.

The card lifts 2px with a brighter border; it settles back slower.

Shrinks to 0.96 the moment the pointer lands; back up on release.

A fill sweeps across while you hold; released early, it retreats.

Follows the pointer 1:1, then springs home carrying its release speed.

One row rides the pointer while the others slide to their new slots.

Dragged past 40% it flies off and fades; short of that it snaps back.

Past the boundary, travel drops to a third; release eases it back.

Three side-to-side shakes, each smaller, while the border flashes.

A circle grows from the exact press point, fading as it expands.

Same distance, same duration. The curve is the only difference.

Full speed at frame one, then a long soft landing.

Barely moves at first, then leaves at full speed.

Accelerates, cruises, brakes. Both ends equally soft.

The same speed from first frame to last.

The four numbers place two handles that bend the speed.

Launch and landing at different rates, beside an even split.

No duration. Stiffness, damping and mass decide when it stops.

Higher tension pulls harder: same distance, earlier arrival.

How fast energy leaves. Critical damping stops without overshoot.

Heavier is slower to leave and harder to stop.

One overshoot past rest, then still. Entry velocity makes the pop.

Looks done long before the math is. At ×20 the error still rings.

A flick keeps its speed on release; friction drains it to a stop.

The hand sets the starting speed; the spring inherits it.

A new target mid-flight keeps position and velocity; the path bends.

One direction, constant speed, faded edges. The join passes unseen.

The same trip twice: one stops after three runs, one repeats forever.

A plain loop snaps back to the start; alternate retraces the path.

Three dots circle at different rates and drift in and out of phase.

A hairline ring leaves the dot every 2s and fades before the next.

Six pixels of drift; the shadow breathes in step so it reads as lift.

A faint sheen crosses every 3s. It stops the moment you hover.

One fades in flat; the other arrives blurred and sharpens in.

A hard-edged wipe, straight or slanted, uncovers still content.

The same wipe twice: one hard cut edge, one soft feathered edge.

A divider splits before from after and follows the drag.

The curve draws itself end to end; dots and marks follow after.

One word becomes another; only the letters that change move.

A sheen sweeps the placeholder until content takes its place.

Each digit sits on its own reel; only the changed ones roll.

The top price jitters as digits flip; the bottom stands still.

Characters land one by one; the caret blinks while it waits.

The same travel at 60 frames a second and again at 12.

Even pacing above; below it stalls, then lurches to catch up.

Eight beats, one missing: the marker holds, then jumps past it.

One run leaves straight away; the other pulls back first, then goes.

Both stop hard; one carries a tip that whips past, then settles.

One drops rigid; the other stretches in the fall, squashes on impact.

The same arrival twice: one rises and grows in, one only fades.