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 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.
Sequencing
When sequencing multiple animations into a larger interaction, it’s critical to focus attention and not present elements out of the intended sequence.
Best practice
Do use motion to create special moments to call attention to interactions that are important.
Don’t use unnecessary or distracting motion just for the sake of creating visual excitement—oftentimes it may not be the best design solution.
