Skip to main contenteBay Playbook
  • Get started
  • Foundations
  • Design system
  • Expressions
  • Resources
  • Articles

Foundations

  • Overview
    • Our logo
    • Using our logo
    • Using our tagline
    • Showcase
    • Our colors
    • Using color
    • Using color in product
    • Using color in marketing
    • Using color in illustration
    • Best practices
    • Showcase
    • Our typeface
    • Using type
    • Using type in digital
    • Using type in print
    • Best practices
    • Showcase
    • Our photos
    • Visual tone
    • Image types
    • Showcase
    • Our icons
    • Using icons
    • Confirmation indicators
    • Icon library
    • Best practices
    • Showcase
    • Our illustrations
    • Visual tone
    • Using illustration
    • Sizing and placement
    • Best practices
    • Showcase
    • Our motion
      • Using motion in product
      • Volume of motion
      • Product transitions
      • Expressive animation
      • Using motion in marketing
      • Layout in motion
      • Typography in motion
      • Depth in motion
    • Overview
    • Include plugin
      • Overview
      • Responsive layout
      • Image ratio
      • Uniform
      • Masonry
      • Mosaic
      • Overview
      • Stacks
    • Interaction levels
    • Interaction states
    • Using object styles in product
    • Using object styles in marketing

Layout in motion

The design system has several layouts that communicate a sense of discovery when brought into motion. Even when designing for motion, always remember to adhere to our Layout in marketing guidelines.

Layout in motion

On this page

  • Storytelling
  • Catalog
  • Discovery
  • Browsing
  • Resources
NextTypography in motion
Things.People.Love.
  • Get started
  • Foundations
  • Design system
  • Expressions
  • Resources
  • Articles
  • About eBay Design
  • Careers
  • Press
  • Privacy policy
© 2026 eBay. All rights reserved.

eBay Evo, the eBay trademark, and the eBay logo are the intellectual property of eBay Inc.

    Storytelling

    Our design system is a playground for expression, from seller stories to captivating visuals. Combine design elements with our motion principles, and the storytelling possibilities are endless.

    Catalog

    Catalog is a multipurpose layout that can be treated in many different ways. In motion, it can show a wide variety of products and categories, or simply be used as a beautiful graphical element.

    Discovery

    Discovery's stacked carousels can convey selection in unique ways. This layout is flexible—you can experiment with different approaches when animating.

    Browsing

    Browsing is useful for showing selection in captivating ways. Use animation to guide focus in the hierarchy and create mesmerizing visuals.

    Resources

    Video description: A 9-second video shows a close up image of a designer watch on a man’s wrist. The screen zooms out and the watch image moves to the center of a colorful catalog grid of product images. The catalog scrolls down revealing more images until one row of product images zoom in with three images across that scroll to the left. A product image of a designer handbag opens, has a playful dropping motion and centers itself while the handle overlaps “Louis Vuitton” in the upper left with “Authenticity Guarantee” and “Free Shipping” badges below. The eBay logo is in the lower left corner and the tagline “Things.People.Love.” is in the lower right. The screen scrolls and the same layout appears but with a colorful pink “Valentino” handbag, followed by a brown “Celine”.

    Video description: A 3-second video shows an image of a gold Lady Liberty coin with a dark red velvet background spin to the center of a large white banner. The coin image shrinks down while a grid of colorful brand images pop onto the screen and all images scale and match to the same size. The images are of collectibles, jewelry, fashion, and sports items.

    Video description: A 3-second video shows a sequence of 5 overlapping images of sneakers descending diagnally from left to right. The images decrease in size as they descend. A slight pulse motion causes all five image to move places in a stacked carousel.

    • Composition

      Learn how to build layouts across product and marketing applications.