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

Choreography

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

Resources

Change log

DateNotes
May, 2025
  • Renamed “eBay Fluid” motion curve to “eBay Standard”
Jun, 2024
  • Page created with eBay Evo