Basics / Animation

Dynamic Presence

We stand for dynamic premium mobility. As such, movements in the Audi look have a typically dynamic character. The basis for this is an animation curve: inspired by the dynamic performance of our cars, it is based on a powerful acceleration at the start and a fast deceleration at the end.

Animation Curve

CSS definition for web applications

transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);

Definition for Apple iOS Apps

[[CAMediaTimingFunction alloc] initWithControlPoints:0.75f:0.02f:0.5f:1.0f]

Definition for Google Android Apps

PathInterpolatorCompat

Definition for motion design in Adobe After Effects

Outgoing Velocity: 75%
Incoming Velocity: 95%

Examples

Direction of Movement

Elements are moved either horizontally or vertically but not at an angle.

Scaling

Transformation into a different state is controlled by means of scaling. Scaling can be combined with other animation parameters, such as a movement.

Opacity

The showing and hiding of elements is controlled by means of opacity. Change in opacity can be combined with other animation parameters, such as a movement, in order to create a more dynamic experience.

Rotation

Rotation is limited to small elements and is not combined with other animation parameters.

Timing

The duration of an animation depends on the size of the elements and the distance it covers.

If there are several elements or animation stages, a clear-cut sequence should be defined. As few elements as possible are animated simultaneously.

Animation