# Prinsipper for motion design for deg som ikke animerer

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

Du trenger ikke å være animatør for å lage bevegelse som føles riktig. Du trenger noen få prinsipper, en håndfull varigheter og disiplinen til å bruke mindre.

## The short version

- God motion design hviler på fem prinsipper: gi hver bevegelse et formål, tim den godt, gi den easing, ordne den etter viktighet og bruk så lite som mulig.
- Små bevegelser i grensesnitt føles vanligvis riktige mellom omtrent 150 og 300 millisekunder, mens større bevegelser og entreer trenger lengre tid.
- Det som kommer inn, bør bremse ned, det som går ut, bør akselerere, og kontinuerlige looper bør bevege seg i jevnt tempo.
- Når flere elementer beveger seg, bør det viktigste bevege seg først, og bare én ting bør lede om gangen.
- Et lite bevegelsessystem med tre varigheter og to eller tre easing-kurver holder bevegelsen i en merkevare konsekvent i alt den lager.

**Prinsipper for motion design** er tommelfingerreglene som får bevegelse til å føles naturlig fremfor tilfeldig. Klassisk figuranimasjon har sine berømte tolv, beskrevet av Disney-animatørene Frank Thomas og Ollie Johnston i *The Illusion of Life*. For designarbeid, som innlegg, nettsider, logoer og presentasjoner, gjør fem av dem nesten hele jobben: **formål, timing, easing, hierarki og måtehold**. Du kan bruke dem uten noen gang å åpne et animasjonsprogram.

## Formål: hver bevegelse bør ha en oppgave

Bevegelse er høylytt. Alt som beveger seg, trekker til seg blikket, så å bevege noe er å påstå at det er viktig akkurat nå. Før du animerer, setter du navn på oppgaven. Klarer du ikke det, lar du det stå stille.

### Bevegelse med en oppgave

- Trekker blikket mot det ene som skal leses først
- Viser hvor noe kom fra eller ble av
- Bekrefter en handling: sendt, lagret, lagt til
- Setter en stemning med en langsom bakgrunn

### Bevegelse for sin egen skyld

- Hvert element spretter inn når det kommer
- Tekst som fortsetter å bevege seg mens du leser
- Snurrende logoer og pulserende knapper
- Overganger som får deg til å vente

## Timing: hvor lang tid bevegelse bør ta

Varighet er prinsippet de fleste bommer på, vanligvis ved å være for trege på små ting og for raske på store. To regler hjelper. Små, hyppige bevegelser bør være raske, fordi folk ser dem hele tiden. Bevegelser som går lenger eller endrer mer, bør ta lengre tid, fordi øyet trenger tid til å følge med.

| Type bevegelse | Typisk varighet | Hvorfor |
| --- | --- | --- |
| Respons på knapper og brytere | Omtrent 100 til 200 ms | Føles umiddelbart, men er fortsatt synlig |
| Små endringer i grensesnittet, menyer | Omtrent 200 til 300 ms | Raskt nok til ikke å forsinke noen |
| Store paneler, sidebytter | Omtrent 300 til 500 ms | Lengre avstand trenger mer tid |
| Tekst som kommer inn i et innlegg eller en video | Omtrent 0.4 til 1 s | Lenge nok til å oppfattes som en entré |
| Bakgrunnsdrift i en loop | Mange sekunder per syklus | Stemning, ikke informasjon: den skal knapt merkes |

Vanlige utgangspunkter brukt i arbeid med grensesnitt og bevegelse. Test på den faktiske enheten og juster.

En nyttig test: legger folk merke til selve animasjonen i stedet for det den viser, er den for langsom eller for stor. Går de helt glipp av endringen, er den for rask.

## Easing: hvorfor ingenting bør bevege seg i konstant fart

Ekte gjenstander øker og senker farten. Bevegelse i én konstant hastighet, kalt lineær, virker mekanisk fordi ingenting i verden beveger seg slik. Easing-kurver legger til akselerasjon og nedbremsing, og det er enkelt å velge riktig når du kjenner tre tilfeller.

- **Inn: ease out.** Kom raskt og fall mykt til ro, som en bil som stanser. De fleste entreer bruker dette.
- **Ut: ease in.** Start mykt og fyk av gårde. Sortier kan også være kortere enn entreer.
- **Bevegelse innenfor rammen: ease in og out.** Start og stopp mykt.
- **Looper og rotasjoner: lineær.** Kontinuerlig bevegelse bør holde jevnt tempo, ellers ser den ut til å nøle i skjøten.

```css
.panel-enter {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);  /* ease out */
}
.panel-leave {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);  /* ease in, and shorter */
}
.background-drift {
  animation: drift 20s linear infinite;                    /* steady loop */
}
```

De tre tilfellene i CSS. [Easing forklart](https://gradiently.design/nb/guide/easing) går dypere inn i kurvene.

## Hierarki: beveg det viktige først

Bevegelse skaper en leserekkefølge, akkurat som størrelse og vekt gjør i et stillestående design. Det som beveger seg først, leses først. Når flere elementer animeres, forskyver du dem i rekkefølge etter viktighet, med et kort opphold på rundt 50 til 150 millisekunder mellom hvert, og lar bare ett element lede om gangen. [Visuelt hierarki](https://gradiently.design/nb/guide/visual-hierarchy) tar for seg den stillestående versjonen av samme idé.

En stående story som kunngjør vårkolleksjonen, med en liten etikett over og en linje med detaljer under

I en animert versjon av denne storyen kommer overskriften først, så datoen, så detaljene. Bakgrunnen holder sitt eget langsomme tempo under.

1. **Bakgrunnen faller til ro** Flaten beveger seg allerede sakte når innlegget dukker opp. Den setter stemningen uten å be om å bli lest.
2. **Overskriften kommer inn** Én tydelig entré, med ease out, på under ett sekund.
3. **Støttelinjene følger** Etiketten og detaljene kommer rett etter, i leserekkefølge, med en mindre bevegelse.
4. **Alt står stille** Ordene stopper og står i ro lenge nok til å bli lest. Bare bakgrunnen fortsetter å bevege seg.

## Måtehold: bruk mindre bevegelse enn du tror

Stillhet er det som får bevegelse til å bety noe. Beveger alt seg, skiller ingenting seg ut, og designet virker urolig. Velg én ledende bevegelse per arbeid, hold avstandene korte, og la ordene stå stille når de har kommet på plass. Måtehold handler også om mennesker: noen opplever bevegelse som ubehagelig eller blir til og med kvalme, så alt du lager, bør fungere med bevegelsen slått av. [Redusert bevegelse](https://gradiently.design/nb/guide/reduced-motion) forklarer hvordan du planlegger for det.

> **Stillbildetesten** Sett animasjonen på pause på et hvilket som helst bilde. Ser ikke det bildet ut som et ferdig design, dekker bevegelsen over et svakt oppsett.

## Konsekvens: et lite bevegelsessystem

Merkevarer holder farger og fonter konsekvente, og bevegelse fortjener samme omsorg. Skriv ned et bitte lite system og bruk det om igjen: tre varigheter, to eller tre easing-kurver og én fast bevegelse for bakgrunner. Det hindrer at hvert nytt arbeid finner opp sin egen fart, og det gjør bevegelsen din gjenkjennelig slik [bevegelse for stillestående merkevarer](https://gradiently.design/nb/guide/motion-for-still-brands) beskriver.

```css
:root {
  --motion-quick: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-quick: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
  }
}
```

Et bevegelsessystem som design tokens. Alt bruker disse navnene, og redusert bevegelse forkorter alle på ett sted.

Bruk de samme prinsippene når du animerer en logo, et innlegg eller en toppseksjon på et nettsted. [Animerte logoer](https://gradiently.design/nb/guide/animated-logo) og [animerte innlegg](https://gradiently.design/nb/guide/animated-social-posts) viser dem i bruk.

## FAQ

### Hva er de grunnleggende prinsippene for motion design?

For designarbeid dekker fem de fleste behov: gi hver bevegelse et formål, velg en fornuftig varighet, bruk easing, ordne bevegelsen etter viktighet og bruk så lite bevegelse som mulig.

### Hvor lang bør en animasjon være?

Små responser i grensesnitt fungerer vanligvis på omtrent 100 til 300 millisekunder, større bevegelser på omtrent 300 til 500 millisekunder, og tekst som kommer inn i innlegg eller video, på rundt et halvt til ett sekund.

### Hvilken easing bør jeg bruke?

Ease out for det som kommer inn, ease in for det som går ut, ease in og out for det som beveger seg innenfor rammen, og lineær for kontinuerlige looper.

### Hva er de 12 prinsippene for animasjon?

De er prinsipper for figuranimasjon beskrevet av Disney-animatørene Frank Thomas og Ollie Johnston i The Illusion of Life. Timing og easing, som de kaller slow in og slow out, lar seg mest direkte overføre til bevegelse i design.