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 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.
Sequencing
When sequencing multiple animations into a larger interaction, it’s critical to focus attention and not present elements out of the intended sequence.