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

[Canonical HTML page](https://gradiently.design/guide/motion-branding-guide)

Two brands can share a typeface and a colour and still feel nothing alike once they move. Motion is the part of identity most brands leave to chance.

## The short version

- Motion branding is the set of rules for how a brand's logo, type, backgrounds and interface move.
- The core decisions are pace, easing, direction and which elements are allowed to move at all.
- A brand's motion should match its character: calm brands move slowly with gentle easing, energetic brands move faster with more overshoot.
- Motion rules are most useful written as a few named durations and easing curves that designers and developers share.
- Good motion branding always includes a reduced motion version for people who ask their devices for less movement.

**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](https://gradiently.design/guide/motion-for-still-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](https://gradiently.design/guide/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.

| Character | Pace | Easing | Typical behaviour |
| --- | --- | --- | --- |
| Calm, premium | Slow, 400 to 700 ms | Soft ease out | Fades, slow rises, drifting colour |
| Confident, editorial | Medium, 250 to 400 ms | Firm ease out | Wipes, clean slides, cuts on the beat |
| Playful, friendly | Quick, 200 to 350 ms | Ease out with overshoot | Pops, bounces, scale ins |
| Technical, precise | Quick, 150 to 250 ms | Sharp ease in out | Straight slides, typewriter text |

Starting points for interface and text motion. Background and ambient motion runs much slower, measured in seconds.

The underlying ideas, such as timing, hierarchy and follow through, are covered in [motion design principles](https://gradiently.design/guide/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.

```css
: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; }
}
```

A brand's motion as tokens. Three durations, one ambient pace and three named curves cover almost everything.

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](https://gradiently.design/guide/reduced-motion) explains how.

## Motion across a brand's assets

| Asset | What to define | Example rule |
| --- | --- | --- |
| Logo | Its entrance, its resting state, how long it holds | Draws in over 800 ms, holds still, never loops |
| Type | One or two entrance styles | Headlines rise; supporting lines fade a beat later |
| Backgrounds | Speed, direction, whether they loop | Colour drifts slowly and loops every 12 seconds |
| Transitions | How one scene or page replaces another | Wipe in the reading direction, never a spin |
| Interface | Hover, press, open and close | Panels open with the base duration, close faster |

One row per asset is enough. If a rule needs a paragraph to explain, it is probably too complicated.

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](https://gradiently.design/guide/animated-logo) goes through the main approaches.

Portrait design with an editorial headline about making things slowly over a softly drifting gradient

A calm brand: long durations, colour that drifts, words that fade in and hold.

Portrait product drop design reading it's here with bright colour and a bold layout

A playful brand: quicker pace, words that pop with overshoot, brighter movement in the background.

## 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.

One brand colour field: `radial-gradient(110% 80% at 70% 30%, #a7f3d0 0%, #10b981 35%, #065f46 70%, #022c22 100%)`

A background like this, moving slowly and the same way every time, becomes as recognisable as a logo.

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](https://gradiently.design/guide/brand-gradient-system) covers how to build colour around it.

### Off brand motion

- Each designer picks their own transitions
- Every element animates at once
- Stock moving backgrounds
- Guidelines written as adjectives only
- No plan for reduced motion

### Motion branding

- Two or three named behaviours, used everywhere
- One thing moves at a time, in order
- A background that belongs to the brand
- Named durations and curves in shared tokens
- A defined still or fade fallback

## FAQ

### What is motion branding?

Motion branding is the set of rules for how a brand moves: its pace, easing, direction and which elements are allowed to move. It keeps videos, social posts, websites and apps feeling like one brand.

### What should brand motion guidelines include?

A few named durations, a few easing curves, two or three entrance behaviours, rules for the logo, type, backgrounds and transitions, and what happens when someone prefers reduced motion.

### How fast should brand animations be?

Interface and text motion usually sits between about 150 and 700 milliseconds, faster for energetic brands and slower for calm ones. Background motion is much slower, measured in seconds.

### Does a small brand need motion branding?

A short version helps any brand that posts video or stories. Even one rule about how words enter and one moving background keeps content consistent.