# Tekstanimaties voor social: rise, pop, wipe en typemachine

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

Je hebt geen vijftig effecten nodig. Vier intro’s, goed gekozen en goed getimed, regelen stories, Reels, aankondigingen en quotes. Dit is wanneer je welke gebruikt.

## The short version

- Rise, pop, wipe en typemachine zijn vier tekstanimaties die de meeste socialmediaposts dekken.
- Rise past bij rustige, premium en redactionele boodschappen; pop past bij korte, energieke woorden zoals prijzen en aanbiedingen.
- Wipe onthult een regel als een gordijn en werkt voor koppen en voor-en-na-onthullingen; typemachine past bij quotes, vragen en alles wat live geschreven moet voelen.
- De meeste intro-animaties lezen het best tussen ongeveer een kwart en driekwart seconde, gevolgd door een pauze die lang genoeg is om de regel twee keer te lezen.
- Gebruik één animatiestijl per post of serie, en laat regels verspringen in plaats van elk woord anders te animeren.

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

| Animatie | Voelt | Gebruik voor | Duur van de intro |
| --- | --- | --- | --- |
| Rise | Rustig, zelfverzekerd, premium | Koppen, lanceringen, quotes, redactionele posts | 400 tot 700 ms |
| Pop | Energiek, speels, urgent | Prijzen, aanbiedingen, haakwoorden van één woord, aftellen | 250 tot 400 ms |
| Wipe | Precies, filmisch, onthullend | Koppen, onthullingen, voor en na | 500 tot 800 ms |
| Typemachine | Persoonlijk, nieuwsgierig, live | Vragen, quotes, tips, achter de schermen | 30 tot 60 ms per letter |

Startpunten per stijl. Langzamer voelt duurder; sneller voelt urgenter. Ga aan beide kanten te ver en mensen stoppen met lezen.

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

Een staande socialpost die een herfstcollectie aankondigt, met een bovenregel, kop en detailregel

Een lanceringspost die bij rise past: eerst de bovenregel, dan de kop, dan het detail, elk een tel na de vorige.

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.

Een verticale uitverkoopstory met de woorden Laatste dag in grote letters en Eindigt om middernacht eronder

Twee woorden die poppen: kort, urgent, in een oogwenk gelezen.

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

Een verticale story die vraagt Wat bakken we vrijdag, met ruimte eronder voor een poll

Een vraag past bij typemachine: het voelt door een mens getypt, live, voor jou. Kort genoeg om in ongeveer een seconde uit te typen.

> **Typemachinerekenkunde** Bij 40 ms per letter duurt een regel van 30 letters 1,2 seconde om te typen, plus zo’n twee seconden pauze. Een regel van vijftien woorden loopt meer dan drie seconden door voordat de pauze begint, dus schrap woorden of verdeel ze over beelden.

## De juiste tekstanimatie kiezen

1. **Begin bij de boodschap** Rustig nieuws rijst. Urgent nieuws popt. Een onthulling veegt. Een persoonlijke notitie typt.
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. **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. **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](https://gradiently.design/nl/guide/instagram-story-design).
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.

### Vermijd

- Elke regel met een andere animatie
- Letters die steeds draaien, omklappen of stuiteren
- Tekst die nog beweegt als de story doorgaat
- Pop op een volledige zin
- Geanimeerde tekst bovenop een drukke, snelle video

### Doe dit

- Eén stijl voor de hele post of serie
- Eén intro, dan stilte
- Een duidelijke pauze vóór het volgende beeld
- Pop op één tot drie woorden
- Een rustige, langzaam bewegende achtergrond onder de 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.

```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; }
}
```

Stel de breedte en steps van de typemachine in op het aantal tekens in je regel. Voor regels in proportionele lettertypen onthul je letter voor letter met een klein script.

De curven tellen even zwaar als de duur; [easing](https://gradiently.design/nl/guide/easing) legt uit waarom rise moet afremmen en pop moet doorschieten. Voor het bredere vak van bewegende letters, zie [kinetische typografie](https://gradiently.design/nl/guide/variable-font-animation).

## 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](https://gradiently.design/nl/guide/animated-instagram-story) en [GIF of MP4](https://gradiently.design/nl/guide/gif-vs-mp4) helpen je het formaat te kiezen.

## FAQ

### Wat is de beste tekstanimatie voor Instagram-stories?

Rise is de veiligste standaard voor de meeste stories. Gebruik pop voor korte urgente woorden, wipe voor onthullingen en typemachine voor vragen of persoonlijke notities.

### Hoe lang moet een tekstanimatie duren?

De meeste intro’s lezen goed tussen ongeveer 250 en 800 milliseconden, gevolgd door een pauze die lang genoeg is om de regel twee keer te lezen.

### Hoe maak ik een typemachine-effect voor tekst?

Onthul één teken tegelijk met ongeveer 30 tot 60 milliseconden per letter. Animeer in CSS de breedte van een regel in een monospace-lettertype met steps() gelijk aan het aantal tekens.

### Moet ik verschillende tekstanimaties in één post gebruiken?

Meestal niet. Eén stijl door een post of hele serie oogt weloverwogen en als merk; stijlen mengen oogt druk.