Title: Motion

URL: https://www.infobip.com/motion

## Motion

## Our motion language is based on the transformation and interaction of our shapes.

## Behaviors

Our shapes morph and connect between them, triggering formal and color reactions to keep them in a constantly active state.

This all happens in the context of our Biposphere, where we can see an infinite amount of information and connection between our shapes. We use the dimensional 3D space to travel and reveal different parts of the Biposphere through an array of simple camera movements.

Curve settings (general):50% in - 80% outCSS: 0.50, 0.00, 0.20, 1.00

## Shape morph

Our shapes can blend between square, circular and squircle form. This can happen in a functional one-step fashion or with a staggered, more expressive way of animating each corner.

## Elongate

In order to introduce text or to support a camera movement, our shapes can elongate using directional left-to-right motion. This also can happen functionally or with an expressive alternative, which introduces a bit of anticipation and release.

## Connect

A shape can go inside another and trigger a Shape Morph reaction, with or without a color change. Ideally, an elongated shape should move into a non-elongated one, but a non-elongated shape can also move.

## Flip

A shape can rotate on its 3D axis to reveal its backside and showcase new information.

## Biosphere 3D space

To keep consistency across Biposphere layouts, it's important to keep the content centered in Z-space, with two layers of shapes in front of it and two layers in the back. This will ensure there is a 3D parallax effect happening every time there is a camera movement happening.

## Biposphere main behaviors

MOVE - HORIZONTAL


We can move from left to right to reveal a different part of the Biposphere. Do not move from right to left, as this implies going backwards.

## Biposphere main behaviors

MOVE - VERTICAL


We can move up or down to reveal a different part of the Biposphere. Both upwards and downwards movement are accepted.

## Biposphere main behaviors

ZOOM

We can zoom in and out, either at Biposphere level or zooming in and out of a shape to generate a transition between layouts.

## Biposphere main behaviors

FLIP


This mechanic is used to reveal the back side of the central element and to add dynamism to the Biposphere without traveling to another point on it. Use sparingly.

## Biposphere main behaviors

HIGHLIGHT

The central shape can grow and rearranges the surrounding shapes to generate a sense of growth within the Biposphere. Used to reveal a larger part of an image or to accentuate a static layout.

## Biposphere main behaviors

SPHERIZE

For moments of extra flair, we can quickly turn the Biposphere onto itself to contain a text CTA. Use this BEHAVIOR sparingly.

## Type behaviors

HEADLINE


Our headlines appear with a general rotation settling to link it to the context of the Biposphere. It reveals word by word as the whole lockup gets in position.

HEADLINE+SHAPE


We can use the Flip mechanic of the shapes to reveal a headline.

## Type behaviors

SMALL TEXT + SHAPE

The best way to make sub headlines and paragraphs appear is with the use of an Elongated shape.

SMALL TEXT

Another way of making a text appear is using a 3D rotational movement. Use this behavior sparingly.

## UI behaviors

Our UI principles stem from the dimensionality of the Biposphere and the Flip behavior of the shapes. It should keep the same logic of our Biposphere animation but reduced to a more functional and interactive language between the shapes and how they change places and flip.