Examples
These are the real surfaces, running the real motion tokens. Read them in the order a shopper meets them: the home page they land on, how that screen hands over to the next, then the product page they came for. Switch between web and native in any section, because the two platforms often answer the same question differently.
Home page
The screen a shopper lands on, and most of it stays still. Nothing animates simply because the page loaded. What moves is what the hand touches, plus a single arrival the page is allowed to make once.
td.motion.reveal220mstd.motion.state100ms
Page transitions
What happens between one screen and the next. On the web, nothing does: the browser rebuilds the page, so there is nothing left to carry across. In the app, the card you tapped grows into the page and shrinks back into it, because there the card and the page are the same thing.
td.motion.page680mstd.motion.reveal220ms
Product page
The screen a shopper came for, so it is already there when they arrive. Controls answer under the finger, sheets rise from the edge they came from, and the one big moment is saved for adding to the bag.
td.motion.reveal220mstd.motion.state100mstd.motion.page680mstd.motion.panel420mstd.motion.signature860ms


