Tekstanimationer til sociale medier: stig op, pop, fej, skrivemaskine

Til opslag på sociale medier klarer fire stilarter til tekstanimation næsten alt: stig op (ordene glider op og toner frem, roligt og eksklusivt), pop (ordene skalerer ind med et lille hop, kort og højlydt), fej (en linje afsløres fra den ene side som et tæppe) og skrivemaskine (bogstaverne kommer frem ét ad gangen, som om de skrives lige nu). Afstem stilen efter budskabet, hold hver entré under cirka tre kvart sekund, og hold så ordene stille længe nok til at læse dem to gange. Brug én stil pr. opslag. Det er det meste af håndværket.

De fire tekstanimationer i overblik

Stig op: det sikre, eksklusive standardvalg

Stig op flytter hver linje et kort stykke opad, mens den toner frem, og lader den så falde på plads. Fordi bevægelsen er lille og bremser op, læser øjet ordene næsten i samme øjeblik, de begynder at dukke op. Det er det rigtige standardvalg for brands, der vil føles rolige: hoteller, studier, hudpleje, arkitektur, konsulenthuse.

Forskyd linjerne med cirka 100 til 150 millisekunder, så de falder som en kaskade. Forskyd kun ord på meget korte linjer; at forskyde bogstaver med stig op ser pjattet ud.

Pop: til korte ord, der skal sidde

Pop skalerer et ord op fra en anelse mindre, skyder en smule over og falder til ro. Den har energi, så den passer til ord, du vil ramme med: en pris, en procentsats, »Udsolgt«, »I aften«, »Sidste dag«. Den fejler på lange sætninger, som vakler i stedet for at lande.

Fej: afslør en overskrift som et tæppe

Fej afdækker en linje fra den ene kant til den anden, så ordene dukker op i læserækkefølge uden at bevæge sig. Den føles bevidst og filmisk, og fordi selve bogstaverne bliver stående, er den en af de mest læsbare entréer. Brug den til overskrifter, til en »før«-linje, der fejes væk for at afsløre et »efter«, eller til et navn, der afsløres i slutningen af en video.

Fej i læseretningen: fra venstre mod højre for dansk og de fleste europæiske sprog. Et fej mod læseretningen føles, som om teksten bliver taget væk.

Skrivemaskine: ord skrevet i øjeblikket

Skrivemaskine afslører bogstaverne ét ad gangen. Den er langsommere end de tre andre, og det er pointen: den får en linje til at føles personlig, som om nogen skriver til dig lige nu. Brug den til spørgsmål, korte citater, tips og noter fra bag om. Hold linjen kort, fordi hele sætningen skal være færdigskrevet, før folk kan læse den, og så skal den stadig have en pause.

Sådan vælger du den rigtige tekstanimation

1. 1

   Start med budskabet

   Rolige nyheder stiger op. Presserende nyheder popper. En afsløring fejer. En personlig note skrives.

2. 2

   Tæl ordene

   Et til tre ord kan tage enhver stil. Lange linjer virker bedst med stig op eller fej; undgå pop og skrivemaskine.

3. 3

   Vælg én stil pr. opslag

   Blandede entréer i ét billede ligner en skabelon, der viser sig frem. Konsekvens er det, der får bevægelse til at føles som dit brand.

4. 4

   Sæt pausen

   Når det sidste ord er faldet på plads, så hold billedet længe nok til at læse det to gange. Stories går automatisk videre, så det betyder mest i Instagram-stories.

5. 5

   Se den uden lyd på en telefon

   Sådan vil mange af dine seere se den. Er en linje svær at fange, så sæt tempoet ned, eller skær ord væk.

Tekstanimationer i CSS, du kan kopiere

På et website kræver de samme fire stilarter få linjer CSS hver. Hold dem korte, kør dem én gang, og slå dem fra for folk, der foretrækker reduceret bevægelse.

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

Kurverne betyder lige så meget som varighederne; easing forklarer, hvorfor stig op skal bremse op, og pop skal skyde over. Det bredere håndværk med typografi i bevægelse finder du i kinetisk typografi.

Sådan animerer du tekst i Gradiently

Studio i Gradiently har de fire tekstanimationer, Stig op, Pop, Fej og Skrivemaskine, til ethvert tekstlag, over en Mark, der kan bevæge sig langsomt bag ordene. Marken holder sit roligste område under teksten, mens den bevæger sig, så linjerne forbliver læselige gennem hele animationen. Med Pro eksporterer du stories og Reels som GIF eller som MP4 eller WebM, hvor browseren understøtter optagelse. Animerede Instagram-stories og GIF vs. MP4 hjælper dig med at vælge format.