Tekstanimasjon for sosiale medier: fire gode stiler

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

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.

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.

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.

Velg riktig tekstanimasjon

1. 1

   Start med budskapet

   Rolige nyheter stiger. Hastebudskap popper. En avdekking sveipes. En personlig beskjed skrives.

2. 2

   Tell ordene

   Ett til tre ord tåler alle stiler. Lange linjer fungerer best med Stigning eller Sveip. Unngå Pop og Skrivemaskin.

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

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

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.

/* 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; }
}

Kurvene betyr like mye som varigheten. Overgangskurver forklarer hvorfor Stigning bør bremse og Pop gå litt for langt. Se kinetisk typografi 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 og GIF eller MP4 hjelper med formatvalget.