Textanimation: höjning, puff, svep och skrivmaskin

För inlägg i sociala medier gör fyra textanimationer nästan allt: höjning (orden glider uppåt och tonar in, lugnt och exklusivt), puff (orden skalas in med en liten studs, kort och högljutt), svep (en rad avslöjas från ena sidan, som en ridå) och skrivmaskin (bokstäverna dyker upp en i taget, som om de skrevs just nu). Låt stilen passa budskapet, håll varje ingång under cirka tre fjärdedels sekund och håll sedan orden stilla tillräckligt länge för att läsa dem två gånger. Använd en stil per inlägg. Det är det mesta av hantverket.

De fyra textanimationerna i korthet

Höjning: den trygga, exklusiva standarden

Höjning flyttar varje rad en kort sträcka uppåt medan den tonar in och låter den sedan lägga sig. Eftersom rörelsen är liten och bromsar in läser ögat orden nästan så fort de börjar synas. Det är rätt standard för varumärken som vill kännas lugna: hotell, ateljéer, hudvård, arkitektur, konsultbyråer.

Förskjut raderna med cirka 100 till 150 millisekunder så att de kaskadar. Förskjut ord bara för mycket korta rader, att förskjuta bokstäver med höjning ser pilligt ut.

Puff: för korta ord som ska landa

Puff skalar upp ett ord från något mindre, skjuter lite över målet och lägger sig. Den har energi, så den passar ord du vill ska slå till: ett pris, en procentsats, ”Slutsålt”, ”I kväll”, ”Sista dagen”. Den fungerar dåligt på långa meningar, som vickar i stället för att landa.

Svep: avslöja en rubrik som en ridå

Svep avtäcker en rad från ena kanten till den andra, så att orden dyker upp i läsordning utan att röra sig. Det känns avsiktligt och filmiskt, och eftersom bokstäverna själva ligger kvar är det en av de mest läsbara ingångarna. Använd det för rubriker, för en ”före”-rad som sveps bort för att avslöja en ”efter”, eller för ett namn som avslöjas i slutet av en video.

Svep i läsriktningen: från vänster till höger på svenska och de flesta europeiska språk. Ett svep mot läsriktningen känns som att texten tas bort.

Skrivmaskin: ord som skrivs i stunden

Skrivmaskin avslöjar bokstäver en i taget. Den är långsammare än de andra tre, och det är poängen: den får en rad att kännas personlig, som om någon skriver till dig just nu. Använd den för frågor, korta citat, tips och anteckningar bakom kulisserna. Håll raden kort, eftersom hela meningen måste skrivas färdigt innan folk kan läsa den, och sedan behöver den fortfarande ett stopp.

Välja rätt textanimation

1. 1

   Utgå från budskapet

   Lugna nyheter höjs. Brådskande nyheter puffar. Ett avslöjande sveps. En personlig anteckning skrivs.

2. 2

   Räkna orden

   Ett till tre ord tål vilken stil som helst. Långa rader fungerar bäst med höjning eller svep, undvik puff och skrivmaskin.

3. 3

   Välj en stil per inlägg

   Att blanda ingångar i en bild ser ut som en mall som visar upp sig. Enhetlighet är det som får rörelse att kännas varumärkesbunden.

4. 4

   Ställ in stoppet

   När det sista ordet har lagt sig håller du bilden tillräckligt länge för att läsa två gånger. Stories går vidare automatiskt, så det betyder mest i Instagram Stories.

5. 5

   Titta på den utan ljud i en telefon

   Så ser många av dina tittare den. Om någon rad är svår att hinna med, gör den långsammare eller ta bort ord.

CSS-textanimationer du kan kopiera

På en webbplats tar samma fyra stilar några rader CSS var. Håll dem korta, kör dem en gång och stäng av dem för dem som föredrar minskad rörelse.

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

Kurvorna betyder lika mycket som varaktigheterna. Easing förklarar varför höjning ska bromsa in och puff ska skjuta över målet. För det bredare hantverket med rörlig text, se kinetisk typografi.

Animera text i Gradiently

Studion i Gradiently har de här fyra textanimationerna, höjning, puff, svep och skrivmaskin, för varje textlager, över en Mark som kan röra sig långsamt bakom orden. Mark håller sin lugnaste yta under texten medan den rör sig, så raderna förblir läsbara genom hela animationen. Med Pro exporterar du stories och Reels som GIF, eller som MP4 eller WebM där webbläsaren stöder inspelning. Animerade Instagram-stories och GIF eller MP4 hjälper dig välja format.