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.
Easing
Leverage easing to emphasize different moments of an action, imply a specific emotion, and add an overall level of polish.
Choreography
Make sure that movement flows seamlessly—all elements should move in harmony, create a cohesive experience, and effortlessly guide the user's attention.
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.
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.
