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

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

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.

Choreography

For both simple and complex motion interaction, ensuring that all elements work together enhances the overall experience. Remember that not all elements are required to have the same timing, animation curve, or action—they just need to be 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.

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.

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.

Resources

Motion tokens

Learn about our motion tokens.

Change log

Date	Notes
Jun, 2024	Page created with eBay Evo