Motion branding: how a brand moves, not just how it looks

Motion branding is the part of an identity that describes how the brand moves: how fast things happen, how they speed up and slow down, which direction they travel and what is allowed to move at all. A logo that snaps into place says something different from one that drifts in. Written down as a handful of rules, motion makes every video, story, website and app feel like the same brand, even when the colours and layouts change.

Why motion belongs in a brand identity

Most brand guidelines stop at logo, colour and type, because they were written for print. Today people often meet a brand moving: in a Reel, an animated story, a website hero, a product interface. If nobody decides how those things move, every designer and every tool decides for them, and the brand starts behaving like several different companies.

Even a brand that is mostly still benefits. A single rule, such as "words arrive by rising gently, never by spinning", stops a lot of off brand work before it starts. If your brand has never moved before, motion graphics for brands is a gentle place to begin.

The four decisions of motion branding

1. Pace. How long things take. Short durations feel efficient and lively; long ones feel calm, considered or luxurious.
2. Easing. How motion speeds up and slows down. Gentle ease out feels natural; a slight overshoot feels playful; linear feels mechanical. See easing for the curves.
3. Direction and behaviour. Do things rise, slide, scale, fade or reveal? Choose two or three behaviours and use them consistently.
4. What moves. Decide which elements may move: the background, the words, the logo, photos. Restraint here is the biggest difference between premium and busy.

The underlying ideas, such as timing, hierarchy and follow through, are covered in motion design principles. Motion branding is the act of choosing among them and committing.

Writing motion rules designers and developers share

Motion guidelines fail when they are written as adjectives. "Smooth and confident" means something different to everyone. Name a few durations and a few easing curves, give them to designers and developers in the same words, and the brand moves the same way in a video editor and in code.

:root {
  /* Pace */
  --motion-quick: 180ms;
  --motion-base: 320ms;
  --motion-calm: 600ms;
  --motion-ambient: 12s;

  /* Easing */
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);   /* soft ease out */
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);    /* ease in out */
  --ease-leave: cubic-bezier(0.7, 0, 0.84, 0);    /* ease in */
}

.headline-enter {
  animation: rise var(--motion-base) var(--ease-arrive) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .headline-enter { animation: none; }
}

Note the last rule. Some people get distracted or unwell from movement and ask their device for less of it. A complete motion brand defines what happens then, usually a simple fade or no motion at all. Prefers reduced motion explains how.

Motion across a brand's assets

The logo usually gets the most attention and appears least often. Backgrounds and type are on screen far more, which is where consistency pays off. For the logo itself, animated logo goes through the main approaches.

Backgrounds that move like your brand

The most visible motion in most brand content is the background: the moving colour behind a story, a Reel or a hero. It is also the motion brands most often borrow from stock, which means it belongs to nobody. A background whose colours, light, grain and movement are all yours does more for recognition than an elaborate logo animation seen once.

That is how Marks work in Gradiently. A Mark is a recipe of colours, materials, light, grain, motion and a type voice, so its movement is part of its identity rather than an effect you add. Every design that wears it, from a story to a slide, moves the same way, and because each Mark is one of a kind and has one owner, nobody else's content moves quite like yours. Brand gradient systems covers how to build colour around it.