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.
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 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 Fluid
Our primary motion curve, eBay Fluid {cubicBezier.fluid}, is both responsive and elegant. Default to this curve as it works in most situations across the 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.
Selecting an ease
Selecting the speed of an animation is both scientific and based on the intended impression of the experience. We aim to create experiences that are consistently smooth and responsive.
For a full list of our pre-defined ease and duration settings, see our Motion tokens.
Video description: A 18-second video shows 2x3 grid with pre-defined ease and duration settings for animation on the left side. Those are: Fluid, Quick, Smooth, Respond, Bounce, and Linear. On the right hand side there is a mobile screen with product images in a grid. When an animation setting is selected and outlined on the left, a slide up bottom sheet appears on the mobile screen on the left. It has an illustration of a man looking at a smart phone while a dragon playing card, an alien figurine, and a comic book float above him with a headline and a blue “Get the app” button. Each setting is selected and and shown on the right with the same mobile screen showcasing the different animation styles possible in the same time duration.
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.
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.
