# Tekstanimasjon for sosiale medier: fire gode stiler

[Canonical HTML page](https://gradiently.design/nb/guide/text-animation-ideas)

Du trenger ikke femti effekter. Fire innganger, godt valgt og riktig timet, dekker storyer, Reels, kunngjøringer og sitater. Her er hva du bør bruke når.

## The short version

- Stigning, Pop, Sveip og Skrivemaskin er fire tekstanimasjonsstiler som dekker de fleste sosiale innlegg.
- Stigning passer til rolige, eksklusive og redaksjonelle budskap. Pop passer til korte, energiske ord som priser og tilbud.
- Sveip avdekker en linje som en gardin og passer til overskrifter og før- og ettervisninger. Skrivemaskin passer til sitater, spørsmål og alt som skal føles skrevet i øyeblikket.
- De fleste innganger leses best på omtrent et kvart til trekvart sekund, fulgt av nok stillstand til å lese linjen to ganger.
- Bruk én animasjonsstil i et innlegg eller en serie, og forskyv linjene fremfor å animere hvert ord forskjellig.

For sosiale innlegg gjør fire stiler av **tekstanimasjon** nesten alt: **Stigning**, der ordene flyter opp og tones inn, rolig og eksklusivt; **Pop**, der ordene skaleres inn med et lite sprett, kort og kraftig; **Sveip**, der en linje avdekkes fra én side som en gardin; og **Skrivemaskin**, der bokstaver kommer én etter én som om de skrives nå. Tilpass stilen til budskapet, hold hver inngang under omtrent trekvart sekund og la ordene stå lenge nok til å leses to ganger. Bruk én stil per innlegg. Det er mesteparten av håndverket.

## De fire tekstanimasjonene i kortform

| Animasjon | Uttrykk | Bruk den til | Inngangslengde |
| --- | --- | --- | --- |
| Stigning | Rolig, selvsikker, eksklusiv | Overskrifter, lanseringer, sitater, redaksjonelle innlegg | 400 til 700 ms |
| Pop | Energisk, leken, presserende | Priser, tilbud, ettordsblikkfang, nedtellinger | 250 til 400 ms |
| Sveip | Presis, filmatisk, avdekkende | Overskrifter, avdekking, før og etter | 500 til 800 ms |
| Skrivemaskin | Personlig, nysgjerrig, i øyeblikket | Spørsmål, sitater, tips, bak kulissene | 30 til 60 ms per bokstav |

Utgangspunkter for hver stil. Langsommere virker mer eksklusivt, raskere mer presserende. Går du for langt i en retning, slutter folk å lese.

## Stigning: det trygge, eksklusive standardvalget

Stigning flytter hver linje litt opp mens den tones inn, og lar den falle til ro. Fordi bevegelsen er liten og bremser, leser øyet ordene nesten så snart de kommer. Det er riktig standardvalg for merkevarer som vil virke rolige: hoteller, studioer, hudpleie, arkitektur og rådgivere.

Et stående sosialt innlegg som annonserer høstkolleksjon, med overlinje, overskrift og detaljlinje

Et lanseringsinnlegg som passer Stigning: overlinje først, så overskrift og detalj, hver litt etter den forrige.

Forskyv linjene med omtrent 100 til 150 millisekunder så de kommer i følge. Forskyv ord bare i svært korte linjer. Bokstavvis Stigning virker pirkete.

## Pop: korte ord som skal treffe

Pop skalerer et ord fra litt mindre, går litt for langt og faller til ro. Den har energi og passer til ord som skal treffe: en pris, prosent, «Utsolgt», «I kveld», «Siste dag». Den svikter på lange setninger, som vakler fremfor å treffe.

En loddrett salgsstory med Siste dag i stor skrift og Slutter ved midnatt under

To ord som popper: korte, presserende og lest på et øyeblikk.

## Sveip: avdekk overskriften som en gardin

Sveip avdekker en linje fra kant til kant, så ordene kommer i leseretning uten å bevege seg. Den virker bevisst og filmatisk. Fordi bokstavene står stille, er den en av de mest lesbare inngangene. Bruk den til overskrifter, en «før»-linje som sveipes bort for å vise «etter», eller et navn som avdekkes i slutten av en video.

Sveip i leseretningen: venstre til høyre for norsk, engelsk og de fleste europeiske språk. Sveip mot leseretningen føles som at teksten tas bort.

## Skrivemaskin: ord skrevet i øyeblikket

Skrivemaskin avdekker én bokstav om gangen. Den er langsommere enn de andre tre, som er poenget: linjen føles personlig, som om noen skriver til deg nå. Bruk den til spørsmål, korte sitater, tips og notater bak kulissene. Hold linjen kort, fordi hele setningen må skrives ferdig før den kan leses, og deretter trenger den stillstand.

En loddrett story som spør Hva skal vi bake på fredag, med plass under til avstemning

Et spørsmål passer Skrivemaskin: det føles skrevet av et menneske, direkte til deg. Kort nok til å skrives på omtrent ett sekund.

> **Regnestykket for Skrivemaskin** Ved 40 ms per bokstav tar en linje på 30 bokstaver 1,2 sekunder å skrive, pluss omtrent to sekunder stillstand. En linje på femten ord går over tre sekunder før stillstanden starter, så kutt ord eller del dem over flere bilder.

## Velg riktig tekstanimasjon

1. **Start med budskapet** Rolige nyheter stiger. Hastebudskap popper. En avdekking sveipes. En personlig beskjed skrives.
2. **Tell ordene** Ett til tre ord tåler alle stiler. Lange linjer fungerer best med Stigning eller Sveip. Unngå Pop og Skrivemaskin.
3. **Velg én stil per innlegg** Å blande innganger i samme bilde virker som en mal som viser seg frem. Konsekvens får bevegelse til å tilhøre merkevaren.
4. **Sett stillstanden** Når siste ord har falt til ro, hold bildet lenge nok til å lese to ganger. Storyer går videre automatisk, så dette betyr mest i [Instagram-storyer](https://gradiently.design/nb/guide/instagram-story-design).
5. **Se uten lyd på telefon** Slik møter mange seere det. Hvis en linje er vanskelig å få med seg, senk farten eller kutt ord.

### Unngå

- Ulik animasjon på hver linje
- Bokstaver som snurrer, vendes eller spretter gjentatte ganger
- Tekst i bevegelse når storyen går videre
- Pop på en hel setning
- Animert tekst over en travel, rask video

### Gjør

- Én stil for hele innlegget eller serien
- Én inngang, deretter stillhet
- Tydelig stillstand før neste bilde
- Pop på ett til tre ord
- En rolig, langsomt bevegelig bakgrunn under ordene

## CSS-tekstanimasjoner du kan kopiere

På et nettsted trenger hver av de fire stilene noen få CSS-linjer. Hold dem korte, kjør én gang og slå av for folk som foretrekker redusert bevegelse.

```css
/* Transforms skip plain inline text: use these on block or inline-block elements */
.rise { animation: rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(0.4em); } }

.pop { animation: pop 320ms cubic-bezier(0.3, 1.5, 0.6, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }

.wipe { animation: wipe 700ms cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.typewriter {
  font-family: ui-monospace, monospace; /* steps() needs equal letter widths */
  white-space: nowrap; overflow: hidden; width: 24ch;
  animation: type 1.2s steps(24) both;
}
@keyframes type { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rise, .pop, .wipe, .typewriter { animation: none; }
}
```

Sett bredden og trinnene i skrivemaskineffekten til antall tegn i linjen. For proporsjonale skrifter bruker du heller et lite skript til bokstavvis avdekking.

Kurvene betyr like mye som varigheten. [Overgangskurver](https://gradiently.design/nb/guide/easing) forklarer hvorfor Stigning bør bremse og Pop gå litt for langt. Se [kinetisk typografi](https://gradiently.design/nb/guide/variable-font-animation) for det bredere håndverket.

## Animer tekst i Gradiently

Studio i Gradiently har disse fire tekstanimasjonene, Stigning, Pop, Sveip og Skrivemaskin, for alle tekstlag, over en Mark som kan bevege seg langsomt bak ordene. Marken holder sitt roligste område under teksten mens den beveger seg, så linjene er lesbare gjennom hele animasjonen. Med Pro eksporterer du storyer og Reels som GIF, eller MP4 og WebM der nettleseren støtter opptak. [Animerte Instagram-storyer](https://gradiently.design/nb/guide/animated-instagram-story) og [GIF eller MP4](https://gradiently.design/nb/guide/gif-vs-mp4) hjelper med formatvalget.

## FAQ

### Hva er beste tekstanimasjon for Instagram-storyer?

Stigning er det tryggeste standardvalget. Bruk Pop til korte hasteord, Sveip til avdekking og Skrivemaskin til spørsmål eller personlige beskjeder.

### Hvor lenge bør en tekstanimasjon vare?

De fleste innganger leses godt på omtrent 250 til 800 millisekunder, fulgt av nok stillstand til å lese linjen to ganger.

### Hvordan lager jeg en skrivemaskineffekt?

Avdekk ett tegn om gangen på omtrent 30 til 60 millisekunder per bokstav. I CSS animerer du bredden på en monospace-linje med steps() lik antall tegn.

### Bør jeg bruke ulike tekstanimasjoner i ett innlegg?

Vanligvis ikke. Én stil i et innlegg eller en hel serie virker bevisst og tilpasset merkevaren. Blanding virker travelt.