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.
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.
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.
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.