# Geanimeerde Instagram-story maken die aandacht vasthoudt

[Canonical HTML page](https://gradiently.design/nl/guide/animated-instagram-story)

Een story krijgt een seconde of twee voordat de duim doorgaat. De juiste beweging verdient de rest van het beeld; de verkeerde maakt de woorden alleen moeilijker te lezen.

## The short version

- Een geanimeerde Instagram-story is een video van 1080×1920, meestal een korte loop, die in plaats van een stilstaande story wordt gebruikt.
- De best leesbare geanimeerde stories laten de achtergrond langzaam bewegen en brengen de woorden één keer binnen, waarna ze stil blijven staan.
- De eerste seconde telt het meest, dus de kop moet binnen ongeveer een seconde na het openen van de story volledig in beeld zijn.
- Upload geanimeerde stories als mp4-video op 1080×1920 en niet als gif, zodat kleurverlopen vloeiend blijven.
- Houd tekst en logo’s weg van de boven- en onderkant van het kader, waar Instagram zijn eigen interface tekent.

Een **geanimeerde Instagram-story** werkt als één ding met een doel beweegt en al het andere leesbaar blijft. In de praktijk betekent dat een achtergrond die langzaam drijft, een kop die één keer met een korte animatie binnenkomt en dan blijft staan, en niets belangrijks bovenin of onderin het kader van 1080×1920. Exporteer hem als mp4, niet als gif, en zorg dat het allereerste beeld al als af ontwerp leest, want sommige mensen zien alleen dat beeld ooit.

## Wat moet bewegen in een geanimeerde story

Een story wordt even bekeken, op armlengte, vaak zonder geluid. Beweging trekt het oog, dus alles wat beweegt concurreert met je woorden. De stories die aandacht vasthouden kiezen één bewegende laag en maken die rustig, en laten de tekst dan zijn werk doen. Drukke stories voelen energiek in de editor en uitputtend op een telefoon.

### Vermoeiend om te kijken

- Elke regel tekst animeert op een andere manier
- Woorden blijven bewegen nadat ze zijn binnengekomen
- Een snelle, contrastrijke achtergrond achter kleine tekst
- Stickers, gifs en effecten opgestapeld in één beeld
- De kop verschijnt na drie seconden

### Houdt de aandacht vast

- Eén tekstanimatiestijl voor de hele story
- Woorden komen binnen en blijven dan volkomen stil
- Een trage achtergrond met een rustig gebied achter de woorden
- Eén bewegend element, bewust gekozen
- De kop is binnen een seconde leesbaar

Hetzelfde principe loopt door al het goede bewegingswerk heen, van logo’s tot websites. Wil je de theorie erachter, dan behandelt [principes van motion design](https://gradiently.design/nl/guide/motion-design-principles) timing, easing en hiërarchie uitgebreider.

## Vier tekstanimaties die werken in stories

Tekstanimatie is de nuttigste beweging in een story, omdat ze het oog vertelt waar te beginnen. Houd hem kort. Een intrede die langer dan ongeveer een halve seconde duurt, gaat voelen als wachten, en mensen tikken door als ze moeten wachten.

| Animatie | Wat ze doet | Gebruik ze voor |
| --- | --- | --- |
| Rise | Woorden schuiven een stukje omhoog en komen tot rust | Rustige aankondigingen, citaten, redactionele stories |
| Pop | Woorden schalen in met een lichte overschrijding | Aanbiedingen, lanceringen, speelse merken |
| Wipe | Een regel wordt van één kant onthuld | Koppen met een sterke leesrichting |
| Typemachine | Letters verschijnen een voor een | Vragen, teasers, korte haken van een paar woorden |

Kies er één per story. Typemachine is de langzaamste, dus houd de regel kort, anders is hij nog aan het typen als mensen wegtikken.

Laat regels op elkaar volgen in plaats van woorden: eerst de kop, een tel later de ondersteunende regel, als laatste de linkaanwijzing. Die volgorde sluit aan bij hoe mensen lezen, en zorgt dat de story klopt, ook als iemand halverwege weggaat. Voor meer patronen, ook kinetische typografie, zie [ideeën voor tekstanimatie](https://gradiently.design/nl/guide/text-animation-ideas).

Verticale story met een bewegende kleurverloopachtergrond die aankondigt dat een nieuwe studio vrijdag opengaat

De kop rijst eerst op, daarna het detail. Beide staan in de middenband, buiten de interface.

Verticale aftelstory met de tekst nog twee dagen voor een lenteselectie, op een zacht geanimeerd kleurverloop

Een aftelling die één keer binnenpopt. De achtergrond blijft bewegen, zodat de story levend voelt terwijl de woorden blijven staan.

## De timing van een geanimeerde Instagram-story

Een stilstaande story blijft ongeveer vijf seconden in beeld voordat Instagram doorgaat. Een videostory speelt zolang de clip duurt, maar de aandacht zit vooraan: als de eerste seconde leeg is, wordt de rest zelden gezien. Plan de tijdlijn vanaf daar achteruit.

1. **0 tot 1 seconde: de kop** De achtergrond beweegt al in het eerste beeld. De kop voltooit zijn intrede aan het einde van de eerste seconde.
2. **1 tot 2 seconden: de ondersteuning** De tweede regel of het product komt binnen. Gebruik dezelfde animatie als de kop, iets kleiner in beweging.
3. **2 tot 3 seconden: de actie** De linkaanwijzing, datum of code verschijnt. Dit is de regel waarop mensen handelen, dus hij heeft tijd nodig om gelezen te worden.
4. **De rest: vasthouden** Er komt niets nieuws binnen. De achtergrond blijft drijven zodat de story zonder zichtbare herstart loopt.

Zes tot tien seconden is een comfortabele lengte voor een ontworpen story met een korte boodschap. Langere clips passen bij praten of demonstreren, niet bij een kop. Gaat de story loopen, dan moet de achtergrond eindigen waar hij begon, wat stap voor stap staat in [naadloze loopvideo](https://gradiently.design/nl/guide/seamless-loop-video).

> **Maak het eerste beeld een af ontwerp** Thumbnails, voorvertoningen en trage verbindingen kunnen het eerste beeld los tonen. Als je woorden vanuit het niets binnenkomen, is dat beeld een lege achtergrond. Laat de kop deels zichtbaar beginnen, of ontwerp het eerste beeld als compleet stilstaand beeld.

## Formaat, veilige zones en exportinstellingen

Een geanimeerde story gebruikt hetzelfde kader als een stilstaande: 1080×1920 pixels, 9:16. De interface van Instagram ligt over de boven- en onderkant, dus houd woorden en logo’s in de middenband. Een gangbare werkregel is om ongeveer de bovenste en onderste 250 pixels vrij van tekst te laten. De volledige uitleg staat in [Instagram Story-formaat](https://gradiently.design/nl/guide/instagram-story-size).

- Story en Reel 9:16: 1080 × 1920
- Feedpost 4:5: 1080 × 1350
- Vierkant 1:1: 1080 × 1080

Het storykader naast de feedformaten. Ontwerp de story op volledige hoogte in plaats van een feedpost uit te rekken.

| Instelling | Aanbeveling | Waarom |
| --- | --- | --- |
| Formaat | Mp4 | Instagram speelt video native af en houdt kleurverlopen vloeiend |
| Afmeting | 1080×1920 px | Er wordt niets geschaald of met balken weergegeven |
| Framerate | 30 fps | Vloeiend genoeg voor trage beweging, kleine bestanden |
| Geluid | Optioneel | Veel mensen kijken zonder geluid, dus woorden moeten de boodschap dragen |
| Vermijd | Gif-uploads | 256 kleuren per beeld geeft bandvorming in kleurverlopen |

Exportinstellingen voor een ontworpen geanimeerde story.

Gif is het ene formaat dat je hier moet vermijden. De limiet van 256 kleuren verandert zachte kleurverlopen in strepen, en een bewegende story is voor Instagram een video, dus geef hem er een. De vergelijking staat in [gif versus mp4](https://gradiently.design/nl/guide/gif-vs-mp4).

## Geanimeerde stories maken die niet op die van anderen lijken

De meeste sjablonen voor geanimeerde stories gebruiken dezelfde handvol bewegende achtergronden, dus een feed vol ervan vervaagt tot één geheel. De achtergrond is waar je merk herkend kan worden voordat iemand een woord leest. Een bewegend kleurvlak dat van jou is, doet meer dan een stockloop ooit kan.

In Gradiently begint een story op een **Mark**: een levende kleurverloop- en materiaalachtergrond die uit zichzelf beweegt en uniek is. Voeg je kop toe, kies rise, pop, wipe of typemachine, en de Mark houdt zijn rustigste gebied achter de woorden terwijl Auto-inkt regel voor regel lichte of donkere tekst kiest. Hetzelfde ontwerp kan dan worden aangepast naar een feedpost of een [Reels-achtergrond](https://gradiently.design/nl/guide/reels-tiktok-backgrounds) zonder het opnieuw te bouwen. Video-export hoort bij Pro en slaat mp4 op waar je browser dat ondersteunt.

Minimale verticale story met één regel over een nieuw menu over een langzaam bewegend kleurverloop

Een trage Mark achter één stilstaande regel. De achtergrond beweegt; de woorden nooit.

## FAQ

### Hoe maak ik een geanimeerde Instagram-story?

Ontwerp een kader van 1080×1920 met een bewegende achtergrond en één tekstanimatie, houd woorden in de middenband, exporteer het als mp4 en upload het als story. De meeste ontwerptools met video-export kunnen dit.

### Welk formaat moet een geanimeerde Instagram-story hebben?

Mp4 op 1080×1920 pixels. Vermijd gif: de limiet van 256 kleuren geeft bandvorming in kleurverlopen, en Instagram behandelt een bewegende story toch als video.

### Hoe lang moet een geanimeerde Instagram-story zijn?

Voor een ontworpen story met een korte boodschap is zes tot tien seconden comfortabel. Zorg dat de kop binnen de eerste seconde in beeld is, want daarna zakt de aandacht snel.

### Waarom ziet mijn geanimeerde story er wazig of gebandeerd uit?

Meestal is hij geëxporteerd als gif, op het verkeerde formaat of met een lage bitrate. Exporteer mp4 op precies 1080×1920 zodat Instagram niets hoeft te schalen.

### Moet de tekst de hele tijd bewegen?

Nee. Laat woorden één keer binnenkomen en dan stilstaan. Bewegende tekst is moeilijker te lezen, en een langzaam bewegende achtergrond houdt de story al levend.