# Slik lager du en animert Instagram-story som holder på oppmerksomheten

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

En story får et sekund eller to før tommelen går videre. Riktig type bevegelse fortjener resten av rammen; feil type gjør bare ordene vanskeligere å lese.

## The short version

- En animert Instagram-story er en video på 1080×1920, som regel en kort loop, brukt i stedet for en stillestående story.
- De mest lesbare animerte storiene lar bakgrunnen bevege seg sakte og henter inn ordene én gang, og lar dem så stå helt stille.
- Det første sekundet betyr mest, så overskriften bør være helt på skjermen innen omtrent ett sekund etter at storyen åpner.
- Last opp animerte stories som MP4-video i 1080×1920 i stedet for GIF, så gradientene forblir jevne.
- Hold tekst og logoer unna toppen og bunnen av rammen, der Instagram tegner sitt eget grensesnitt.

En **animert Instagram-story** fungerer når én ting beveger seg med en hensikt og alt annet forblir lesbart. I praksis betyr det en bakgrunn som driver sakte, en overskrift som kommer inn én gang med en kort animasjon og så blir stående, og ingenting viktig øverst eller nederst i rammen på 1080×1920. Eksporter den som MP4, ikke GIF, og sørg for at den aller første rammen allerede leses som et ferdig design, for noen vil bare noen gang se den rammen.

## Hva som bør bevege seg i en animert story

En story ses et øyeblikk, på strak arm, ofte uten lyd. Bevegelse trekker blikket, så alt som beveger seg konkurrerer med ordene dine. Storiene som holder på oppmerksomheten velger ett lag i bevegelse og gjør det rolig, og lar så skriften gjøre jobben sin. Travle stories føles energiske i redigeringsverktøyet og utmattende på en telefon.

### Slitsomt å se på

- Hver tekstlinje animeres på en ny måte
- Ord fortsetter å bevege seg etter at de har kommet inn
- En rask bakgrunn med høy kontrast bak liten tekst
- Klistremerker, GIF-er og effekter stablet i én ramme
- Overskriften dukker opp etter tre sekunder

### Holder på oppmerksomheten

- Én stil for tekstanimasjon gjennom hele storyen
- Ord kommer inn og står så helt stille
- En langsom bakgrunn med et rolig område bak ordene
- Ett element i bevegelse, valgt med vilje
- Overskriften kan leses innen ett sekund

Det samme prinsippet går igjen i alt godt bevegelsesarbeid, fra logoer til nettsider. Vil du ha teorien bak, dekker [prinsipper for bevegelsesdesign](https://gradiently.design/nb/guide/motion-design-principles) timing, easing og hierarki grundigere.

## Fire tekstanimasjoner som fungerer i stories

Tekstanimasjon er den mest nyttige bevegelsen i en story, fordi den forteller øyet hvor det skal begynne. Hold den kort. En inngang som tar lengre tid enn rundt et halvt sekund, begynner å føles som venting, og folk trykker seg forbi venting.

| Animasjon | Hva den gjør | Bruk den til |
| --- | --- | --- |
| Stigning | Ordene glir et lite stykke opp og legger seg | Rolige kunngjøringer, sitater, redaksjonelle stories |
| Sprett | Ordene skaleres inn med et lite oversving | Tilbud, lanseringer, lekne merkevarer |
| Avdekking | En linje avdekkes fra én side | Overskrifter med tydelig leseretning |
| Skrivemaskin | Bokstavene dukker opp én etter én | Spørsmål, teasere, korte kroker på noen få ord |

Velg én per story. Skrivemaskin er tregest, så hold linjen kort, ellers skriver den fortsatt når folk trykker seg videre.

Forskyv linjer i stedet for ord: overskriften først, støttelinjen et slag senere, lenkeoppfordringen sist. Den rekkefølgen matcher hvordan folk leser, og den betyr at storyen gir mening selv om noen forlater den halvveis. For flere mønstre, inkludert kinetisk typografi, se [ideer til tekstanimasjon](https://gradiently.design/nb/guide/text-animation-ideas).

Vertikal story med gradientbakgrunn i bevegelse som kunngjør at et nytt studio åpner fredag

Overskriften stiger inn først, deretter detaljen. Begge står i det midtre feltet, unna grensesnittet.

Vertikal nedtellingsstory med teksten To dager igjen for et vårutvalg, på en myk animert gradient

En nedtelling som spretter inn én gang. Bakgrunnen fortsetter å bevege seg, så storyen føles levende mens ordene står.

## Timing av en animert Instagram-story

En stillestående story blir stående på skjermen i rundt fem sekunder før Instagram går videre. En videostory spilles så lenge klippet varer, men oppmerksomheten er størst i starten: er det første sekundet tomt, blir resten sjelden sett. Planlegg tidslinjen baklengs ut fra det.

1. **0 til 1 sekund: overskriften** Bakgrunnen beveger seg allerede i første ramme. Overskriften er ferdig med inngangen innen slutten av det første sekundet.
2. **1 til 2 sekunder: støtten** Den andre linjen eller produktet kommer inn. Bruk samme animasjon som overskriften, med litt mindre bevegelse.
3. **2 til 3 sekunder: handlingen** Lenkeoppfordringen, datoen eller koden dukker opp. Det er denne linjen folk handler på, så den trenger tid til å bli lest.
4. **Resten: hold** Ingenting nytt kommer inn. Bakgrunnen fortsetter å drive, så storyen looper uten synlig omstart.

Seks til ti sekunder er en behagelig lengde for en designet story med et kort budskap. Lengre klipp passer prat eller demonstrasjon, ikke en overskrift. Skal storyen loope, må bakgrunnen slutte der den begynte, noe som gjennomgås steg for steg i [sømløs loopvideo](https://gradiently.design/nb/guide/seamless-loop-video).

> **Gjør den første rammen til et ferdig design** Miniatyrbilder, forhåndsvisninger og trege tilkoblinger kan vise den første rammen alene. Animeres ordene inn fra ingenting, er den rammen en tom bakgrunn. Start med overskriften delvis synlig, eller design den første rammen som et komplett stillbilde.

## Størrelse, sikre soner og eksportinnstillinger

En animert story bruker samme ramme som en stillestående: 1080×1920 piksler, 9:16. Instagrams grensesnitt ligger over toppen og bunnen, så hold ord og logoer i det midtre feltet. En vanlig arbeidsregel er å la omtrent de øverste og nederste 250 pikslene være fri for tekst. Hele oversikten finner du i [størrelse på Instagram-story](https://gradiently.design/nb/guide/instagram-story-size).

- Story og Reel 9:16: 1080 × 1920
- Feed-innlegg 4:5: 1080 × 1350
- Kvadrat 1:1: 1080 × 1080

Story-rammen ved siden av feed-formatene. Design storyen i full høyde i stedet for å strekke et feed-innlegg til å passe.

| Innstilling | Anbefaling | Hvorfor |
| --- | --- | --- |
| Format | MP4 | Instagram spiller video direkte og holder gradientene jevne |
| Størrelse | 1080×1920 px | Ingenting skaleres om eller får svarte kanter |
| Bildefrekvens | 30 fps | Jevnt nok for langsom bevegelse, små filer |
| Lyd | Valgfritt | Mange ser uten lyd, så ordene må bære budskapet |
| Unngå | Opplasting av GIF | 256 farger per ramme gir striper i gradienter |

Eksportinnstillinger for en designet animert story.

GIF er det ene formatet du bør unngå her. Grensen på 256 farger gjør myke gradienter om til striper, og en story i bevegelse er en video så langt Instagram er bekymret, så gi den en video. Sammenligningen står i [GIF eller MP4](https://gradiently.design/nb/guide/gif-vs-mp4).

## Animerte stories som ikke ser ut som alle andres

De fleste maler for animerte stories bruker den samme lille håndfullen bakgrunner i bevegelse, så en feed full av dem flyter sammen. Bakgrunnen er der merkevaren din kan kjennes igjen før noen leser et ord. Et fargefelt i bevegelse som tilhører deg, gjør mer enn en standardloop noen gang vil gjøre.

I Gradiently starter en story på en **Mark**: en levende bakgrunn av gradient og materiale som beveger seg av seg selv og er unik. Legg til overskriften, velg stigning, sprett, avdekking eller skrivemaskin, og Marken holder sitt roligste område bak ordene mens auto ink velger lys eller mørk skrift linje for linje. Det samme designet kan så endres til et feed-innlegg eller en [bakgrunn for Reels](https://gradiently.design/nb/guide/reels-tiktok-backgrounds) uten å bygges på nytt. Videoeksport er en del av Pro og lagrer MP4 der nettleseren din støtter det.

Minimalistisk vertikal story med én linje om en ny meny over en langsomt bevegelig gradient

En langsom Mark bak én stillestående linje. Bakgrunnen beveger seg; ordene gjør det aldri.

## FAQ

### Hvordan lager jeg en animert Instagram-story?

Design en ramme på 1080×1920 med en bakgrunn i bevegelse og én tekstanimasjon, hold ordene i det midtre feltet, eksporter den så som MP4 og last den opp som story. De fleste designverktøy med videoeksport kan gjøre dette.

### Hvilket format bør en animert Instagram-story ha?

MP4 i 1080×1920 piksler. Unngå GIF: grensen på 256 farger gir striper i gradienter, og Instagram behandler uansett en story i bevegelse som video.

### Hvor lang bør en animert Instagram-story være?

For en designet story med et kort budskap er seks til ti sekunder behagelig. Få overskriften på skjermen i løpet av det første sekundet, for oppmerksomheten faller raskt etter det.

### Hvorfor ser den animerte storyen min uskarp eller stripete ut?

Som regel ble den eksportert som GIF, i feil størrelse eller med lav bitrate. Eksporter MP4 i nøyaktig 1080×1920, så Instagram ikke har noe å skalere om.

### Bør teksten bevege seg hele tiden?

Nei. La ordene animeres inn én gang og så stå stille. Tekst i bevegelse er vanskeligere å lese, og en bakgrunn som beveger seg sakte holder allerede storyen levende.