Using motion in marketing

Our brand motion system is a robust, principle-based toolkit used to add function, personality, and a human touch. It helps us show how people and products connect, emphasizing the ease of discovery on eBay.

Overview

The motion that shows up throughout our system is meant to bring our brand to life in a consistent yet playful and unexpected way.

Principles

Video description: A 3-second video shows a black card that has a slight pop motion that then shrinks back down to place itself in the center of a 3x3 grid of black image cards.

Anticipation

Building anticipation in animation can lead to improved focus on specific elements. We create this sense of anticipation by easing out of a move before the coming action. This is a technique that works best with large moves and isn’t always necessary for smaller ones.

Video description: A 1-second video shows 3 stacked cards that start small in the lower left corner and grow increasing larger to the upper right corner. Starting from the smallest is a pulsing echo movement. Once the motion hits the last and largest card it shrinks down to a circle and subtly pops off the screen so the other cards take its place.

Stagger

Staggering elements in motion effortlessly aligns with our design system's stacking elements. This helps grouped elements feel connected in a more natural way and like additional elements are an echo of the first.

Video description: A 3-second video shows a white card with rounded corners that moves to fill the square. Bold black stacked words “Things.People.Love.” are in the center. The card shrinks down to a small circle in the center of the background until it disappears and the screen turns black.

Masking

Masking ties together disparate elements through using the signature design traits (consistent shapes, rounded edges). This calls back to the product in a way that feels familiar and uniquely eBay.

Resources

Change log

Date	Notes
Jun, 2024	Created with eBay Evo