Principle

Consistent

Consistency results in efficiency and perceived intuitiveness. It should also be consistent with the movements that we know from the physical world — friction, acceleration, etc.

Informative

Motion gives the sense of order, create perception. Unlike decorative animation, Sotheby’s motion should be mainly used for guiding the users through complexity and helping establish hierarchy.

Conversational

Use motion to provide feedback, emphasis, context, or delight, therefore creating emotional connections and adding personality. It’s unique human qualities that tie back to Sotheby's customers and brand values.

Easing

Easing curve functions mimic how objects move in real life. It specifies the value of a property given a percentage of completeness.

Standard Easing

Use for UI or objects that are moving from place to place on the screen.

Platform	Protocol
After Effects	Outgoing Velocity: 80% Incoming Velocity: 80%
CSS	transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1) Duration: 500ms-Responsive Web | 300ms-Native App

Decelerate Easing

Use for objects or UI entering the scene.

Platform	Protocol
After Effects	Outgoing Velocity: 0% Incoming Velocity: 83%
CSS	transition-timing-function: cubic-bezier(0.0 , 0.0 , 0.17 , 1) Duration: 500ms-Responsive Web | 300ms-Native App

Accelerate Easing

Use for UI or objects that are exiting the scene.

Platform	Protocol
After Effects	Outgoing Velocity: 50% Incoming Velocity: 0%
CSS	transition-timing-function: cubic-bezier(0.5 , 0 , 1 , 1) Duration: 300ms-Responsive Web | 200ms-Native App

Duration

Here are the basic rules we follow for Sotheby's motion:

1. In UI animations, 500ms is the maximum amount of time that a user perceives as instant.
2. Transitions that require less user attention than the user’s next task (eg. close, dismiss, or collapse) need shorter durations.
3. Sotheby's motion uses 50ms as a basic unit. The duration will always be n*50ms (eg. 100ms, 150ms, 1000ms ...).

Motion’s duration should be dynamic based on the factors below:

Complexity Level

Simple animations require less time to complete than complex animations.

Indicators with a number enter and exit have a fade/scale animation of 150ms.

Indicators with a message has a longer duration of 1000ms.

Entering and Exiting

Enter is typically longer in duration than exit. Because they require different levels of attention.
Both durations should be long enough to allow users to understand where the UI comes and goes.

Modal enters with a slide-down animation.
Duration: 500ms.

Modal exits faster with a slide-up animation (eg: user clicks on cancel).
Duration: 200ms.

Transition Scale

The transition scale includes the complexity of the element and its travel distance.
The larger the change in distance (traveled) or size (scaling) of the element, the longer the animation takes.

The long list takes longer time(250ms) than the short list(150ms)

Duration Tokens

Currently, we can use these static value tokens for consistent implementation.

Token	Value	Usage
duration-micro-fast-01	50 ms	Micro-interactions such as button and toggle
duration-micro-fast-02	100 ms	Micro-interactions such as fade
duration-micro-moderate	150 ms	Micro-interactions, small expansion, short distance movements
duration-micro-slow	200 ms	Micro-interactions
duration-micro-slower	250 ms	Micro-interactions, large expansion, long-distance movements
duration-macro-fast	300 ms	Interactions that don't require much attention. Such as modal exiting and morphing modal windows
duration-macro-slow	500 ms	Interactions that require users' attention. Such as modal entering
duration-macro-slowest	600 ms	Background dimming