Best practices
Five practices decide almost every motion question on a page. Each one is live below in both voices: the same component in Thread's, and in the borrowed habit it guards against. Play them side by side, because the difference is quicker to feel than to argue. Then see them at full size on Examples, where the real surfaces are running.
Animate the thing the user just touched.
Not: animate somewhere the finger is not.
This is the rule the other four are made of. Motion answers action, and the answer belongs where the action happened.
One control, changing shape under the finger. Press it and it expands into the stepper on td.motion.reveal, then settles back to the count on its own once the shopper has moved on.
The same press, answered in the far corner. The button does nothing, so the one place the shopper is already looking is the one place that never confirms anything.
Let one thing move at a time.
Not: cascade entrances across a screen.
Motion is how a screen says which thing changed. Two things moving at once says nothing, and a whole screen moving says less.
Replay this card and watch it do nothing. That stillness is the practice: the screen was already there. Now pick a tile. One thing moves, it is the thing you picked, and you can tell instantly which one it was.
The same screen, with the header and four tiles each entering on their own delay. Nothing is emphasised because everything is, and the screen is unusable until the last one lands.
Swap text and prices instantly.
Not: fade every label that changes.
Text is content, not choreography. Animating it makes the one thing a shopper came to read briefly unreadable.
$74.99 $150.00
In stock
Change the size. The chip answers on td.motion.state because you touched it, and the price is simply the new price. It is legible the instant it changes.
$74.99 $150.00
In stock
The same swap, cross faded. For a third of a second the price is unreadable, and the one thing a shopper is comparing is the one thing the animation takes away.
Spend signature once per session.
Not: loop decoration nobody caused.
Expressive motion works by scarcity. Spend it twice and it is worth half as much; loop it and it is worth nothing.
Big Home Event
Up to 60% off
One arrival on td.motion.signature, then stillness. Replay to see it again; a shopper sees it once a session, which is the whole reason it lands.
Big Home Event
Up to 60% off
No arrival at all, and a badge and shimmer that never stop. Nobody caused them and nobody can end them, so they are not emphasis, they are noise you have to read past.
Bind a recipe and let the tokens carry it.
Not: borrow platform physics no token governs.
A recipe can be tuned, matched across platforms, and collapsed for reduced motion in one place. A borrowed spring cannot.