# Motion branding: hoe een merk beweegt, niet alleen oogt

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

Twee merken kunnen hetzelfde lettertype en dezelfde kleur delen en toch niets op elkaar lijken zodra ze bewegen. Beweging is het deel van identiteit dat de meeste merken aan het toeval overlaten.

## The short version

- Motion branding is de set regels voor hoe het logo, de letters, achtergronden en interface van een merk bewegen.
- De kernbeslissingen zijn tempo, easing, richting en welke elementen überhaupt mogen bewegen.
- De beweging van een merk moet passen bij zijn karakter: rustige merken bewegen langzaam met zachte easing, energieke merken sneller met meer overshoot.
- Bewegingsregels zijn het nuttigst als een paar benoemde duren en easingcurves die ontwerpers en ontwikkelaars delen.
- Goede motion branding bevat altijd een versie met verminderde beweging voor mensen die hun apparaat om minder beweging vragen.

**Motion branding** is het deel van een identiteit dat beschrijft hoe het merk beweegt: hoe snel dingen gebeuren, hoe ze versnellen en vertragen, welke kant ze op gaan en wat überhaupt mag bewegen. Een logo dat op zijn plek klikt zegt iets anders dan een logo dat binnendrijft. Als een handvol regels opgeschreven laat beweging elke video, story, website en app aanvoelen als hetzelfde merk, ook als kleuren en opmaken veranderen.

## Waarom beweging bij een merkidentiteit hoort

De meeste merkrichtlijnen stoppen bij logo, kleur en letters, omdat ze voor print zijn geschreven. Tegenwoordig ontmoeten mensen een merk vaak in beweging: in een Reel, een geanimeerde story, een websitehero, een productinterface. Beslist niemand hoe die dingen bewegen, dan beslist elke ontwerper en elke tool voor hen, en begint het merk zich te gedragen als meerdere verschillende bedrijven.

Zelfs een merk dat meestal stilstaat heeft er baat bij. Eén enkele regel, zoals “woorden komen binnen door zacht omhoog te komen, nooit door te draaien”, voorkomt veel werk buiten de merkstijl voordat het begint. Heeft je merk nog nooit bewogen, dan is [motion graphics voor merken](https://gradiently.design/nl/guide/motion-for-still-brands) een zachte plek om te beginnen.

## De vier beslissingen van motion branding

1. **Tempo.** Hoe lang dingen duren. Korte duren voelen efficiënt en levendig; lange voelen kalm, bedachtzaam of luxueus.
2. **Easing.** Hoe beweging versnelt en vertraagt. Zachte ease-out voelt natuurlijk; een lichte overshoot voelt speels; lineair voelt mechanisch. Zie [easing](https://gradiently.design/nl/guide/easing) voor de curves.
3. **Richting en gedrag.** Stijgen dingen, schuiven ze, schalen ze, vervagen ze of onthullen ze? Kies twee of drie gedragingen en gebruik ze consequent.
4. **Wat beweegt.** Bepaal welke elementen mogen bewegen: de achtergrond, de woorden, het logo, foto’s. Terughoudendheid is hier het grootste verschil tussen premium en druk.

| Karakter | Tempo | Easing | Typisch gedrag |
| --- | --- | --- | --- |
| Rustig, premium | Langzaam, 400 tot 700 ms | Zachte ease-out | Fades, langzaam stijgen, driftende kleur |
| Zelfverzekerd, redactioneel | Gemiddeld, 250 tot 400 ms | Stevige ease-out | Wipes, nette schuifbewegingen, sneden op de beat |
| Speels, vriendelijk | Snel, 200 tot 350 ms | Ease-out met overshoot | Pops, stuiters, inschalen |
| Technisch, precies | Snel, 150 tot 250 ms | Scherpe ease-in-out | Rechte schuifbewegingen, typemachinetekst |

Beginpunten voor interface- en tekstbeweging. Achtergrond- en sfeerbeweging loopt veel langzamer, gemeten in seconden.

De onderliggende ideeën, zoals timing, hiërarchie en doorbeweging, staan in [bewegingsontwerpprincipes](https://gradiently.design/nl/guide/motion-design-principles). Motion branding is het kiezen daaruit en je eraan committeren.

## Bewegingsregels schrijven die ontwerpers en ontwikkelaars delen

Bewegingsrichtlijnen mislukken als ze als bijvoeglijke naamwoorden worden geschreven. “Soepel en zelfverzekerd” betekent voor iedereen iets anders. Noem een paar duren en een paar easingcurves, geef ze aan ontwerpers en ontwikkelaars in dezelfde woorden, en het merk beweegt hetzelfde in een video-editor en 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; }
}
```

De beweging van een merk als tokens. Drie duren, één sfeertempo en drie benoemde curves dekken bijna alles.

Let op de laatste regel. Sommige mensen raken afgeleid of onwel van beweging en vragen hun apparaat om minder. Een complete bewegingsmerkidentiteit bepaalt wat er dan gebeurt, meestal een simpele fade of helemaal geen beweging. [Prefers reduced motion](https://gradiently.design/nl/guide/reduced-motion) legt uit hoe.

## Beweging in de assets van een merk

| Asset | Wat je bepaalt | Voorbeeldregel |
| --- | --- | --- |
| Logo | Zijn intrede, zijn rusttoestand, hoe lang hij blijft staan | Tekent zich in over 800 ms, blijft stil staan, loopt nooit in een lus |
| Letters | Een of twee intredestijlen | Koppen stijgen; ondersteunende regels vervagen een tel later |
| Achtergronden | Snelheid, richting, of ze in een lus lopen | Kleur drijft langzaam en loopt elke 12 seconden in een lus |
| Overgangen | Hoe de ene scène of pagina de andere vervangt | Wipe in de leesrichting, nooit een draai |
| Interface | Hover, indrukken, openen en sluiten | Panelen openen met de basisduur, sluiten sneller |

Eén rij per asset is genoeg. Heeft een regel een alinea nodig om te worden uitgelegd, dan is hij waarschijnlijk te ingewikkeld.

Het logo krijgt meestal de meeste aandacht en verschijnt het minst vaak. Achtergronden en letters staan veel vaker in beeld, en daar loont consistentie. Voor het logo zelf gaat [geanimeerd logo](https://gradiently.design/nl/guide/animated-logo) de belangrijkste aanpakken langs.

Een staand ontwerp met een redactionele kop over langzaam dingen maken boven een zacht driftend verloop

Een rustig merk: lange duren, kleur die driftt, woorden die zacht verschijnen en blijven staan.

Een staand productlanceringsontwerp met de tekst Hij is er, met felle kleur en een gedurfde opmaak

Een speels merk: sneller tempo, woorden die poppen met overshoot, helderdere beweging op de achtergrond.

## Achtergronden die bewegen als je merk

De meest zichtbare beweging in de meeste merkcontent is de achtergrond: de bewegende kleur achter een story, een Reel of een hero. Het is ook de beweging die merken het vaakst van stock lenen, wat betekent dat ze van niemand is. Een achtergrond waarvan kleuren, licht, korrel en beweging allemaal van jou zijn, doet meer voor herkenning dan een uitgebreide logoanimatie die je één keer ziet.

Eén merkkleurvlak: `radial-gradient(110% 80% at 70% 30%, #a7f3d0 0%, #10b981 35%, #065f46 70%, #022c22 100%)`

Een achtergrond als deze, die langzaam en elke keer op dezelfde manier beweegt, wordt net zo herkenbaar als een logo.

Zo werken Marks in Gradiently. Een Mark is een recept van kleuren, materialen, licht, korrel, beweging en een lettertoon, dus zijn beweging is deel van zijn identiteit in plaats van een effect dat je toevoegt. Elk ontwerp dat hem draagt, van een story tot een slide, beweegt op dezelfde manier, en omdat elke Mark uniek is en één eigenaar heeft, beweegt de content van niemand anders precies zoals die van jou. [Merkverloopsystemen](https://gradiently.design/nl/guide/brand-gradient-system) behandelt hoe je er kleur omheen bouwt.

### Buiten de merkstijl bewegen

- Elke ontwerper kiest zijn eigen overgangen
- Elk element animeert tegelijk
- Bewegende stockachtergronden
- Richtlijnen alleen als bijvoeglijke naamwoorden geschreven
- Geen plan voor verminderde beweging

### Motion branding

- Twee of drie benoemde gedragingen, overal gebruikt
- Eén ding beweegt tegelijk, in volgorde
- Een achtergrond die bij het merk hoort
- Benoemde duren en curves in gedeelde tokens
- Een gedefinieerde stilstaande of fade-terugval

## FAQ

### Wat is motion branding?

Motion branding is de set regels voor hoe een merk beweegt: tempo, easing, richting en welke elementen mogen bewegen. Het laat video’s, socialmediaposts, websites en apps aanvoelen als één merk.

### Wat moeten bewegingsrichtlijnen voor een merk bevatten?

Een paar benoemde duren, een paar easingcurves, twee of drie intredegedragingen, regels voor het logo, letters, achtergronden en overgangen, en wat er gebeurt als iemand verminderde beweging verkiest.

### Hoe snel moeten merkanimaties zijn?

Interface- en tekstbeweging zit meestal tussen ongeveer 150 en 700 milliseconden, sneller voor energieke merken en langzamer voor rustige. Achtergrondbeweging is veel langzamer, gemeten in seconden.

### Heeft een klein merk motion branding nodig?

Een korte versie helpt elk merk dat video of stories post. Zelfs één regel over hoe woorden binnenkomen en één bewegende achtergrond houdt content consistent.