Motion

Built around the concept of unifying forces, Schibsted uses rotation as a key distinctive element in its motion visual language. Here you’ll find some ideas to keep in mind when approaching motion in the new Schibsted system.

Download logotype and symbol animations

Download animations of the pattern

Download animations of gradients

General important concepts

Rotate!

Built around the concept of unifying forces, Schibsted uses rotation as a key distinctive element in its motion visual language. The counterclockwise rotation direction references directly how the symbol animates and how it showcases the concept.

In the symbol, both parts of the S are rotating to represent two forces merging. For the logotype, this is applied through how the letters appear rotating around the symbol. Both in the in and out animations, the letters continue in that same rotation direction.

Differentiate brand and product

For brand animated elements, always try to apply the concept of rotation to build a coherent language between elements. But for product design elements, it would be preferable in most cases to go towards efficiency over substance.

 Ease in long, ease out short

Animations that remove, close, fade out, dismiss or collapse elements have to use shorter duration. They should require less attention from the user in comparison to the next task. Animating in should take more time.

That’s why the principles have two durations to choose from, it’s to allow you to variate and choose the most appropriate one depending on the action.

 

Values and motion principles

Supporting the digital brand, we have three motion principles. Each of them is based on the values of Schibsted and is crafted with a purpose in mind: being functional, adding character or adding an emotional element. They are ruled by settings such as duration, easings, feelings and usage.

Empowerment function

Empowered, therefore confident – whenever communicating functionality it is important to be concise and quick, leaving no space for doubt.

The desired time interval to communicate empowerment is fast: 400 ms – 600 ms

 

Flexibility character

Flexible, therefore accessible – whenever communicating in a more personalised manner it’s important to leave a little more room for feeling and make it more accessible through reaching for identification with the audience in case.

The desired time interval to communicate flexibility is medium: 600 ms – 800 ms

 

Unity emotion

United, therefore organic – whenever communicating unity it’s important to acknowledge diversity and complexity while prioritising a human touch in order to add emotional value to the animation.

The desired time interval to communicate unity is slow: 800 ms – 3,000 ms

 

Motion scales and durations

 

There is a correlation between the time interval for the animation, the communication context and the value to convey.

Empowerment Function

Through sharp easing, this principle allows for confident interactions, communicating on trust, knowledge and confidence that Schibsted has built over the years.

Conceptually, it explores the pioneering and innovative side of the unifying forces through a stronger easing for shorter animations.

 

Usage

  • Brand/Editorial
    • Use to add a quick snappy feeling to movement. A quick rotation, or a quick scale-up.
  • Product
    • Use for primary and simpler animation. With its short duration, it can be used for quick transitions, opening modals, etc.

Duration

  • Fast – 400 ms
  • Medium – 600 ms

Feelings

  • Quickness
  • Confidence
  • Knowledge
  • Trustworthiness

Easings

  • Outgoing
    • Influence: 0
    • Speed:  40
  • Incoming
    • Influence:  60
    • Speed:  0
  • iOS
    • 0.00, 0.40, 0.40, 1.00

Flexibility character

Through short and soft starts and long easing outs, this principle allows for longer, more generous and lively animations.

It’s best used for animations that can take more time to express character such as secondary animations, both for brand and product.

Usage

  • Brand / Editorial
    • Use to add character to more complex motion that needs more time such as shapes expanding, unmasking, tracing shapes, etc.
  • Product
    • It’s tailored towards secondary animations that can take more time and be more expressive such as hero containers or whenever the content block is editorial.

Duration

  • Medium –600 ms
  • Slow – 800 ms

Feelings

  • Dynamism
  • Generosity
  • Liveliness
  • Subtlety

Easings

  • Outgoing
    • Influence:  30
    • Speed: 0
  • Incoming
    • Influence:  90
    • Speed: 0
  • iOS
    • 0.30, 0.00, 0.10, 1.00

Unity emotion

Through linear easing, this principle allows for more organic movement and timing. Conceptually, it explores the softer side of the unifying force and lets us envision a more complex reality around Schibsted’s services, with a human touch.

The linearity of the speed references the feeling of a constant data flow.

Usage

  • Brand/Editorial
    • Use to animate softer things such as gradient changes, shapes and pattern movements along a path.
  • Product
    • Use to animate data information, charts, loaders and pattern movements.

Duration

  • Slow – 800 ms
  • Custom – 1,000 ms to 3,000 ms

Feelings

  • Flow
  • Organicity
  • Naturality
  • Softness

Easings

Contrasting with the rest of the motion system, the incoming and outgoing easings are linear.