Tekstanimaties voor social: rise, pop, wipe en typemachine

Voor socialposts doen vier tekstanimaties bijna alles: rise (woorden zweven omhoog en vervagen in beeld, rustig en premium), pop (woorden schalen binnen met een kleine stuiter, kort en luid), wipe (een regel wordt vanaf één kant onthuld, als een gordijn) en typemachine (letters verschijnen één voor één, alsof het nu geschreven wordt). Stem de stijl af op de boodschap, houd elke intro onder ongeveer driekwart seconde en laat de woorden daarna lang genoeg stilstaan om twee keer te lezen. Gebruik één stijl per post. Dat is het meeste van het vak.

De vier tekstanimaties in één oogopslag

Rise: de veilige, premium standaard

Rise verplaatst elke regel een klein stukje omhoog terwijl hij in beeld vervaagt, en laat hem dan zakken. Omdat de beweging klein is en afremt, leest het oog de woorden bijna zodra ze verschijnen. Het is de juiste standaard voor merken die rustig willen voelen: hotels, ateliers, huidverzorging, architectuur, adviesbureaus.

Laat regels zo’n 100 tot 150 milliseconden verspringen zodat ze naar beneden vallen als een waterval. Laat alleen woorden verspringen bij hele korte regels; letters laten verspringen met rise oogt onrustig.

Pop: voor korte woorden die moeten landen

Pop schaalt een woord op vanuit iets kleiner, schiet een tikje door en komt tot rust. Het heeft energie en past dus bij woorden die moeten raken: een prijs, een percentage, “Uitverkocht”, “Vanavond”, “Laatste dag”. Het faalt bij lange zinnen, die wiebelen in plaats van landen.

Wipe: een kop onthullen als een gordijn

Wipe legt een regel van de ene naar de andere rand bloot, zodat de woorden in leesvolgorde verschijnen zonder te bewegen. Het voelt weloverwogen en filmisch, en omdat de letters zelf op hun plek blijven, is het een van de best leesbare intro’s. Gebruik het voor koppen, voor een “voor”-regel die wegveegt om een “na” te onthullen, of voor een naam die aan het einde van een video wordt onthuld.

Veeg in de leesrichting: van links naar rechts voor het Nederlands en de meeste Europese talen. Een veeg tegen de leesrichting in voelt alsof de tekst wordt weggehaald.

Typemachine: woorden live geschreven

Typemachine onthult letters één voor één. Het is langzamer dan de andere drie, en dat is de bedoeling: het maakt een regel persoonlijk, alsof iemand nu aan jou schrijft. Gebruik het voor vragen, korte quotes, tips en notities achter de schermen. Houd de regel kort, want de hele zin moet klaar zijn met typen voordat mensen hem kunnen lezen, en daarna heeft hij nog een pauze nodig.

De juiste tekstanimatie kiezen

1. 1

   Begin bij de boodschap

   Rustig nieuws rijst. Urgent nieuws popt. Een onthulling veegt. Een persoonlijke notitie typt.

2. 2

   Tel de woorden

   Eén tot drie woorden kunnen in elke stijl. Lange regels werken het best met rise of wipe; vermijd pop en typemachine.

3. 3

   Kies één stijl per post

   Intro’s mengen in één beeld ziet eruit als een sjabloon dat showt. Consistentie maakt dat beweging als merk voelt.

4. 4

   Stel de pauze in

   Houd het beeld nadat het laatste woord tot rust komt lang genoeg vast om twee keer te lezen. Stories gaan automatisch door, dus dit telt het zwaarst in Instagram-stories.

5. 5

   Bekijk het gedempt op een telefoon

   Zo zien veel van je kijkers het. Is een regel moeilijk te volgen, vertraag hem dan of schrap woorden.

CSS-tekstanimaties om te kopiëren

Op een website kosten dezelfde vier stijlen elk een paar regels CSS. Houd ze kort, laat ze één keer lopen en schakel ze uit voor mensen die liever minder beweging hebben.

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

De curven tellen even zwaar als de duur; easing legt uit waarom rise moet afremmen en pop moet doorschieten. Voor het bredere vak van bewegende letters, zie kinetische typografie.

Tekst animeren in Gradiently

De Studio van Gradiently heeft deze vier tekstanimaties, rise, pop, wipe en typemachine, voor elke tekstlaag, boven een Mark die langzaam achter de woorden kan bewegen. De Mark houdt zijn rustigste vlak onder de tekst terwijl hij beweegt, zodat regels de hele animatie door leesbaar blijven. Met Pro exporteer je stories en Reels als GIF, of als MP4 of WebM waar de browser opnemen ondersteunt. Geanimeerde Instagram-stories en GIF of MP4 helpen je het formaat te kiezen.