Product transitions

Transitions can help with focusing attention, masking latency, and creating a consistent experience in product. We use several different transition patterns in the product that all have their own benefits.

The Navigate pattern is used to quickly navigate to a new page. This is the most common pattern on web but has other applications across the product, like selecting a key page from the bottom navigation.

Push

The Push pattern is our most common transition while navigating between pages on mobile platforms. It’s a clear signal for users who are browsing that they can always return to where they previously were.

Glide

The Glide pattern is the most expressive way to transition from one page to another. This pattern creates a consistent experience from page to page by transferring key elements seamlessly.

Reveal

The Reveal pattern is used to introduce new content such as snackbars, bottom sheets, modals, and popovers.

Loading

Loading is additive to other transition patterns. Almost every transition will likely have some sort of visible load state applied to it.

Though loading is used in several different ways across the product, its purpose never changes. It’s used to reduce friction when transitioning, focus the user’s attention, give them confidence that everything is working properly, and create the illusion of shorter wait times. For more info, see Loading overview.

Resources

Change log

DateNotes
Jun, 2024
  • Created with eBay Evo