Animation_Examples

Animation_Examples
Filnavn Last ned/lagre
Horizontal_Variant-B.mp4
Horizontal_Variant-A-1.mp4
Vertical_Variant-A.mp4
Vertical_Variant-B.mp4
Vertical_Variant-C.mp4

Animation guidelines

Introduction

These guidelines are developed to ensure a consistent animation and motion expression for the Vikinglotto brand. 

Speed and flow

As the design of Vikinglotto consists of large flat graphic elements and areas, it is important to use an efficient but still smooth movement when animating. Ensure the graphics/scenes have enough speed to express the desired agile and light feeling, and that the velocity is not hard and linear  but still eased to keep it from becoming too loud

As a rule of thumb, large elements should already be moving when they enter the visible area, and ease down. When animating elements out of frame, they should ease out, and keep the speed as they leave.

Avoid animating one element/fullframe design at a time keep the flow and connect the various elements together by animating them in an sequential manner.

Another rule of thumb is to avoid animating rotation and transparency altogether. When in doubt, limit the animation to Position and Scale.

The Logo

Keep the movement of the logo to a minimum, it should sign [? complement?] the other communicating elements not play main part.

The counter

The counter is a special animation for counting up the big numbers that communicate the size of the huge jackpot. This counter shows random, huge numbers on their way up to the big prize. Remember to change the numbers around every time you produce animations, to ensure variation.

The Highlight Element

The Highlight Element plays a bigger part when the Vikinglotto brand is animated. It takes on different roles, guiding the other elements, dragging them in, flying through them, knocking on the numbers when they count up and of course extends to the Highlight Element separating the call-to-action we know from the design guidelines.

The transitions and wipes

The solid colour plates are the main elements of transitions and wipes. They can also be used with the duotone photos. Remember to change the colours around the palette is there to be used!

The Smile is also a good transition element, as long as it’s used correctly. (See You shall not …”)

By all means, please …
  • … use other colours than the ones used in the examples!
    Just follow the palette and overall colour instructions.
  • … change and move around the sequence of the different layouts. They are just examples on how the different fullscreen scenes transition and interact with each other.
  • … change and develop on the movement of the Highlight Element just keep it in the same style, and remember to use it as a Sherpa, not a main character.
You shall not …
  • … animate, rotate or extrude any of the elements in 3D. (It must appear flat.)
  • … animate The Smile as a laughing, speaking, moving mouth. Keep it in its original shape. Don’t rotate it either. And remember the guides on how to position it on the screen.
  • … animate or adjust the The Logo. Keep it in its original shape and appearance.
  • … animate the weight, kerning or letterforms of the typography. Use texts as bound objects.
  • … add effects to the animation style. No echos, blurs or similar effects.