Motion

Motion breathes life into our brand, adding a new dimension to our personality. Every movement should distinctly feel like Klarna.

Motion principles

Motion at Klarna is guided by three interconnected principles that should always work together to define how we move, feel, and communicate. The best work balances all of these three principles:

  • 0

    Simple

    Motion should be crystal clear and easy to understand. Every single movement serves a specific visual or communicative role, and must always feel elegant and streamlined.

  • 0

    Purposeful

    Motion should drive meaning by highlighting key elements and helping viewers focus on what matters. Well-timed animations guide attention, clarify messaging, and improve usability. They lift what’s important, and don’t compete for attention.

  • 0

    Playful

    Motion should feel human and bring warmth, adding a spark without feeling forced, cartoony or exaggerated. Small, thoughtful details give Klarna its unique character, and this playfulness should be confident and intentional.

Badge

A motion badge is our main logo animation, ideal for most productions. It’s consistently used at the start, end, or both ends of each video to ignite the narrative.

STANDARD

To be used in shorter formats, revealing the badge quickly. This approach should be more simple.

  • 0

    Animate in

    Quick reveal.

  • 0

    Attention bump

    Draws attention to the badge.

SPECIAL

To be used when there is more time, allowing the content to be more playful.

  • 0

    Spinning badge

    Quick reveal.

  • 0

    Spinning badge zoom

    Slower and more playful.

Wordmark

A motion wordmark is for scenarios where our badge animations might not be suitable, such as situations where there’s a pink background with pink imagery.

  • 0

    Standard

    To be used in shorter formats, revealing the badge quickly. This approach should be more simple.

  • 0

    Special

    To be used when there is more time, allowing the content to be more playful.

Typography

Motion typography comes with a handy collection of pre-made text animations. Choose what to use based on the message, format, duration, and context. While you can mix and match between the presets, don’t overdo it and always keep simplicity in mind.

PRESETS

  • 0

    Push by word

  • 0

    Scroll

  • 0

    Zoom in

  • 0

    Push by line

Special

  • 0

    Attention bump

    Some productions require an attention bump mid-way through the animation. By animating the header out and matching it with a simultaneous in-animation, we create an effective attention-grabbing effect.

  • 0

    Custom text animations

    Sometimes custom typography animations are needed for specific projects, which call for an extra layer of playfulness. When an animation goes outside the four presets, it must still always align with our motion principles.

Transitions

  • 0

    Simple cut

    Offers straightforward, fast and effective transitions for most productions.

  • 0

    Match cut

    Builds on a simple cut, linking two sequences together with similar motion.

Preset

Although simple cuts and match cuts are very effective in most cases, some productions call for longer transitions. These can be used for an example in long sequences to break the monotony of only using cuts. Should be used sparingly.

  • 0

    Badge transition

    Provides an impactful way to transition into the badge from the main content, also serving as an effective outro.

  • 0

    Scroll

    A useful way to add dynamism and playfulness, but should be used sparingly.

  • 0

    Swipe

    When using transitions in our grid:

1. Make sure the footage pushes objects and doesn't overlay them. 

2. Position graphic elements under the footage, gradually revealing them for a stronger visual impact.

UI animations

We use the Material 3 Standard easing set as the primary reference for UI animations. For more details, check out the Material 3 motion page.

  • 0

    Standard

  • 0

    Standard accelerate

  • 0

    Standard decelerate

Misuse

Here’s what to steer clear of when creating animations.

  • 0

    Don’t use out animations. Generally there’s no need for this and it detracts valuable time from the message.

  • 0

    Don’t use cartoony animations. While they seem fun, they lack professional tone and don’t align with the brand.

  • 0

    Don’t compete with the content. While animation usually enhances the message, clarity is more effective.