Motion

Principles

compass Supportive
Motion leads the users attention and guides him while being as focussed and reduced as possible.
puzzle Personal
The motion design fits to the TUI brand identity and creates a consistent, recognizable look.
partyhorn Joyful
Motion rewards the user for successful interactions and improves the flow. That way it brings joy to the user experience.

The Motion System

In it's basis every animation consists out of two factors: The motion curve and the speed of it. By defining those two factors we created a conistent motion system that fits the brand identity.

Motion Curves

The curves are inspired by the TUI Logo. They combine the round and smooth form of the smile and the playfulness of the dot.

Main-Curve: Ease-In-Out

animation-timing-function: ease-in-out;

The Main-Curve is meant to be used for all big and medium sized animations. Ease-In-Out is a common standard for animations but fits still nicely to the brand. It feels smooth and natural and symbolizes the round smile of the TUI logo.

Brand-Curve: Ease In + Overshoot

animation-timing-function: cubic-bezier(0.65, 0.05, 0.4, 1.3);

The Brand-Curve adds a very characteristic look to every animation. It starts classic with an Ease-In but ends with an Overshoot. That creates a playful, positive feeling and symbolizes the dot of the TUI logo. Used in the right amount this curve creates a unique brand look.

Speed:

The duration of the animation is based on the size and complexity of it. The TUI motion system has comparatively high durations. This creates a reduced speed and feels more relaxed and fitting to the brand's personality. It also makes it easier to follow and understand more complex choreographies.

Small Animation

  • Duration: 200ms
  • Used for Icon transitions, opacity, ...

Medium Animation

  • Duration: opening 500ms, closing 400ms
  • Used for morphing chips or button animations

Big Animations

  • Duration: opening 600ms, closing 500ms
  • Used for modals and overlays

Attributes

There are several attributes that can be animated. To secure a consistency it is important to define the use cases for every attribute.

Attribute Use Case
position orientation
scale attention, hierachy
rotation loading, ongoing change
opacity fading

Rules & Guidelines:

  1. Incoming Elements grow out of their Trigger to point out the Connection between them.
  2. The Brand-Curve is only used once in a choreography.
  3. Motion is only used to improve the usability not to create something "fancy".

Examples

Motion Dictionary:

Motion: A term that describes the complete field of animated user interfaces, including icons and illustrations.

Animation: An animation is the change over time of a visual attribute like the position, color or size.

Transition: A transition is a specific form of animation, where one element or complete screen fades into another usually by changing the opacity of both.

Choreography: A term for the behaviour of multiple animated elements triggered by one event.

Overshoot: When an animation goes further than 100% of its end value and returns to the end value afterwards.

Outgoing element: an element that leaves the screen during an animation.

Incoming element: an element that enters the screen during an animation.

Persistent element: an element that stays on the screen during an animation.

Related articles