Using motion in product

We use motion to help engage, navigate, and delight. Motion creates a more human experience by bringing our product to life.

Considerations

Video description: A 4-second video shows a mobile design with 2x2 grid of tiles. The bottom left tile pops up and takes over the design. The product image is enlarged with copy beneath. It eases back to its original place in the stacked grid.

Easing

Leverage easing to emphasize different moments of an action, imply a specific emotion, and add an overall level of polish.

Video description: A 4-second video shows a close up of a mobile design with a nav bar featuring a search field and cart icon. Below are 2 image tiles. A complex motion interaction occurs where all elements work together. A quick left slide motion occurs and a back arrow icon appears in place of the search field and an overflow horizontal icon is after the shopping cart icon. Below the 2 tiles transform to 1 tile.

Choreography

Make sure that movement flows seamlessly—all elements should move in harmony, create a cohesive experience, and effortlessly guide the user's attention.

Video description: A 4-second video shows a mobile design of a product image tile with copy and a button below. The button is selected and an animated bottom sheet slides up. It reads “Just a moment.” with a dashed line of ebay colors animating below. It pops back down so the product design appears again.

Focus

Use motion intentionally as a tool to highlight the highest-priority information and create more meaningful connections with our users.

Easing

Easing is a key principle not only in our system but in animation as a whole. There are numerous ways to enhance movement through animation curves. When comparing animations of the same time duration, you can convey different levels of responsiveness, elegance, playfulness, and other characteristics simply by adjusting the curve.

Video description: A 7-second video shows a graph of two curved lines ascending to the right. At the same time on the right of the screen 2 pill shaped buttons rising from bottom to top with a trail behind them. The graph then shows 2 curved lines descending while on the right the two buttons move top to bottom with a trail fading behind them.

eBay Standard

Our primary motion curve, eBay standard: motion.easing.standard, strikes a balance between responsive and elegant.

We recommend defaulting to this curve for most use cases in product.
 

Video description: A 5-second video of an easing motion curve going from the bottom left of the screen that raises vertically quickly and continues to move up but at a slower steady pace. At the same time a corresponding dot in motion is on the right moving up the screen at the same speed as the curve. The curve moves down from top right to bottom left in the same motion patten but inverse. The dot on the right shows corresponding ease in motion from top to bottom.

Choreography

For both simple and complex motion interactions, ensure that all elements work together to enhance the overall experience. Remember that not all elements are required to have the same timing, animation curve, or action—they just need to work in harmony.

Sequencing

When sequencing multiple animations into a larger interaction, it’s critical to focus attention and not present elements out of the intended sequence.

Video description: A 3-second video shows a search screen with a search bar with “Computer chair” typed in and triggers a choreography of sequencing motion. AI chat bubbles load, 2x2 item tiles appear with images of computer chairs along with titles and prices below each. The motion has a fluid loading action up until is hits the fixed bottom navigation.

Focus

Motion allows us to manipulate the design hierarchy in order to solve problems that static design often can not. Successful motion interactions should be seamless and invisible but also focus the user’s attention when desired.

Video description: A 5-second video shows a product mobile screen where the the click indicator selects the “Add to Cart” button. Once selected a bottom sheet slides up that reads “Adding to Cart” with a loading animation of ebay heritage colors in a dashed line. A new bottom sheet appears that reads “Added to cart” and has a sneaker image along with the product details and a blue “Go to cart” button followed by “Related sponsored items” showing 2 sneaker images. The click indicator selects the “X” on the upper right corner of the bottom sheet. The bottom sheet closes out and the main mobile screen is back.

Best practice

Do use motion to create special moments to call attention to interactions that are important.

Video description: A 7-second video shows a mobile product page. When scrolling down it stops at the product name, seller info, and price. There is a promotional callout with a light blue background with a promotion icon that has a fanning and stacking motion followed by “Take $52 off this item” and an arrow.

Don’t use unnecessary or distracting motion just for the sake of creating visual excitement—oftentimes it may not be the best design solution.

Video description: A 7-second video shows a mobile product page of a white sneaker. When scrolling down the cart icon spins in the upper right corner. The circle seller profile pulses while the price and “Free 3 day shipping by Tue 29 to WA 98125” slides in from the left. Below are 3 stacked callout fields. The first callout has a light blue background that reads “Take $5 off this item” while the icon has a stacking and fanning motion. The second callout flashes the copy “New with tags” on and off. The third callout copy slides in from the right at the same time as the price and shipping info. All of these motions are happening at the same time and loop.

Resources

Motion tokens
Learn about our motion tokens.

Change log

Date	Notes
May, 2025	Renamed “eBay Fluid” motion curve to “eBay Standard”
Jun, 2024	Page created with eBay Evo

Using motion in product

Considerations

Easing

Choreography

Focus

Easing

eBay Standard

Choreography

Sequencing

Focus

Best practice

Resources

Motion tokens

Change log