Best practices
Five practices decide almost every motion question on a page. Each one is live below in both voices: the same component, once in Thread's and once in the borrowed habits it guards against. Play them side by side, because the difference is quicker to feel than to argue. For these practices applied to whole surfaces see Examples, and for how views hand over to each other see Transitions.
Animate the thing the user just touched.
Not: animate content because it scrolled into view.
This is the rule the other four are made of. Motion answers action, and a scroll is not an action performed on the content.
Scroll it: nothing follows you. The rows were already there, and scrolling is not something that happened to them. Tap one and it answers on td.motion.state, right where your finger is.
The same rows, animating because they entered the viewport. It looks considered on the first scroll and costs you on every one after, because the content is never simply there when you arrive.
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.
What moves on a screen, and why
A screen is mostly still. Motion marks the few things that just changed, and the stillness around them is what makes the change legible. The rule that decides every case: motion answers action. If the user did not just do something, nothing should be moving.
Home screen
The campaign hero may take signature once per session; it is the one arrival worth watching. Everything else loads still: modules do not fade in as you scroll, and cards do not cascade. Tap feedback runs state, and a carousel settles on reveal.
Product page
Swatches answer on state: the selection ring moves the moment you tap. The product image answers the swatch on reveal, arriving beside the action that asked for it. Add to bag expands on reveal and confirms on signature, once. Price and copy swap instantly; text is content, not choreography.
Header on scroll
While the finger is down, the header tracks the gesture one to one; scrubbed motion follows the hand, not a duration. When the gesture ends, it settles on reveal. The logo, search, and icons ride the bar; they do not animate on their own.
Focus
Focus arrives, it does not travel. The indicator appears at state pace at most, and never glides between fields: a ring in transit lags the keyboard and helps no one.
What moves
- Feedback for a tap or a drag
- A change of state: selection, toggle, expansion
- Surfaces entering or leaving: drawers, menus, modals
- The one brand moment a session
What holds still
- Content as it scrolls into view
- Text, prices, and labels when they change
- Merchandising modules while they load
- Decoration of any kind
- Focus while it moves between fields
- Anything the user did not just cause
The motion budget
A landing page is where these rules get tested hardest, because it is the one page where every team has something to promote. A conventional retail homepage answers that pressure with motion: rotating carousels, a rotating offer bar, modules that fade in as you scroll, autoplaying video. Counted together that is eight or more things moving before a shopper has touched anything. Thread's answer is not a ban, it is a budget.
1
signature moment, per session
The hero, and only the hero. Nothing else on the page gets an entrance.
1
thing moving at a time
When two things move together, neither one reads as the important one.
0
modules that animate on scroll
Content arriving is not an event. The user scrolled; the page did not change.
0
loops, anywhere on the page
A shimmer, a rotation, a pulsing badge: motion nobody caused and nobody can stop.
The budget is the decision worth agreeing on first, because everything else follows from it. Motion is a finite thing to spend on a page, not a finish applied to every module. Spend it on the one arrival worth watching and on answering what the shopper just did, and the page reads as curated. Spend it everywhere and the page reads as anxious, and the moment that actually mattered is lost in the noise.
Choreography: one tap, four recipes
When one action changes several things at once, the recipes fire in sequence rather than all together. Add the gown to your bag and watch the order: the sheet arrives on panel, the confirmation inside it lands on signature because the decision is the page's one authored moment, the recommendations follow on reveal, and the bag count ticks on state as the sheet settles. The sequence itself is composition rather than a token: every delay is a fraction of the panel beat, so the whole moment rescales as one.
Beaded Flutter Gown
$268
Notice what happens when you leave. Everything exits together on the panel’s exit curve, faster than it arrived. Arrival earns sequencing because it directs attention through the change; departure should simply get out of the way.
What hover may and may not do
Hover is the weakest signal a shopper gives, so it earns less than a tap does. This is the rule that settles the cases the lists above do not name.
Hover may give feedback and reveal a control. Hover may not change content.
A pointer on its way to the header crosses eight product cards and did not ask to see any of them. So a tile may scale to say it is one target, and quick add may appear because it belongs to the card the pointer is on. Swapping the product image for a second shot fails the same test: it changes what the shopper is looking at, which is a decision the shopper did not make. Content changes on click, or it does not change.
Two consequences worth stating, because they are the usual objections. Alternate shots still need somewhere to live, and that is the product page or an explicit control on the card. And touch has no hover at all, so anything living only on hover is already missing for most of the traffic.