Motion

    How the brand moves in video, presentations, social and on screen: the logo and tagline animations, and the timing every animated piece follows. Every value here comes from the Design System.

    On this page

    Timing

    Enterslow + fast
    Exitfast
    Staggerfast / 2

    Brand motion

    The two animations that carry the brand: the wordmark arriving letter by letter, and the animated tagline, the one place the tagline stands alone. Use them as they are.
    Logo intro. The letters rise one after another on the decelerate curve.

    Return on Investment. Return on Innovation. Return on Imagination. We are IM Digital.

    Animated tagline. It loops while it is on screen and rests on the sign-off.

    Principles

    Four rules every animated piece follows. Hover one, or press Play, to see it.

    • Touchable

      Everything interactive reacts on hover and gives on press. Pressed elements scale to 0.97.

    • Entries take their time

      Elements arrive on a spring or the decelerate curve, over about 550ms.

    • Exits are fast

      Elements leave in 150ms on the accelerate curve, and they never bounce.

    • Less motion on request

      When someone asks their device for less motion, every effect becomes a short fade.

    Durations

    The published durations. Press a track to run its timing on the standard curve. One runs at a time.
    • 150ms
      --duration-fast
      hover, press, color changes
    • 250ms
      --duration-base
      layout shifts: sidebar collapse, nav shrink
    • 400ms
      --duration-slow
      large surfaces

    Easings

    The curve set. Standard for almost everything, decelerate for what enters, accelerate for what leaves, spring for entries with weight.
    • standard
      --ease-standard

      The default for almost everything.

      cubic-bezier(0.2, 0, 0, 1)

    • decelerate
      --ease-decelerate

      Elements entering the screen.

      cubic-bezier(0.05, 0.7, 0.1, 1)

    • accelerate
      --ease-accelerate

      Elements leaving the screen.

      cubic-bezier(0.3, 0, 0.8, 0.15)

    • spring
      --ease-spring

      Entries that should feel physical. A true spring where the browser supports it, a bezier everywhere else.

      cubic-bezier(0.32, 1.2, 0.32, 1)