# Så gör du en animerad Instagram-story som håller kvar blicken [Canonical HTML page](https://gradiently.design/sv/guide/animated-instagram-story) En story får en sekund eller två innan tummen går vidare. Rätt sorts rörelse förtjänar resten av rutan, medan fel sorts bara gör orden svårare att läsa. ## The short version - En animerad Instagram-story är en video i 1080×1920, oftast en kort loop, som används i stället för en stillbildsstory. - De mest läsbara animerade storyerna låter bakgrunden röra sig långsamt och för in orden en gång, och håller dem sedan stilla. - Den första sekunden betyder mest, så rubriken ska vara helt synlig inom ungefär en sekund efter att storyn öppnats. - Ladda upp animerade storyer som MP4-video i 1080×1920 i stället för som GIF, så att gradienter förblir mjuka. - Håll text och logotyper borta från rutans topp och botten, där Instagram ritar sitt eget gränssnitt. En **animerad Instagram-story** fungerar när en sak rör sig med ett syfte och allt annat förblir läsbart. I praktiken betyder det en bakgrund som glider långsamt, en rubrik som kommer in en gång med en kort animation och sedan står kvar, och inget viktigt i övre eller nedre delen av ramen på 1080×1920. Exportera den som MP4, inte GIF, och se till att allra första rutan redan läses som en färdig design, eftersom vissa bara någonsin kommer att se den rutan. ## Vad som ska röra sig i en animerad story En story tittas på i ett ögonblick, på armlängds avstånd, ofta med ljudet av. Rörelse drar ögat, så varje rörligt element konkurrerar med dina ord. De storyer som håller kvar uppmärksamheten väljer ett rörligt lager och gör det lugnt, och låter sedan texten göra sitt jobb. Stökiga storyer känns energiska i redigeraren och uttröttande på en telefon. ### Tröttsamt att titta på - Varje textrad animeras på ett olika sätt - Orden fortsätter röra sig efter att de kommit - En snabb bakgrund med hög kontrast bakom liten text - Klistermärken, GIF och effekter staplade på en ruta - Rubriken dyker upp efter tre sekunder ### Håller kvar uppmärksamheten - En textanimationsstil genom hela storyn - Orden kommer in och står sedan helt stilla - En långsam bakgrund med ett lugnt område bakom orden - Ett rörligt element, valt med avsikt - Rubriken går att läsa inom en sekund Samma princip löper genom allt bra rörelsearbete, från logotyper till webbplatser. Vill du ha teorin bakom den tar [rörelsedesignens principer](https://gradiently.design/sv/guide/motion-design-principles) upp timing, acceleration och hierarki på djupet. ## Fyra textanimationer som fungerar i storyer Textanimation är den mest användbara rörelsen i en story, eftersom den visar ögat var det ska börja. Håll den kort. En ingång som tar längre än ungefär en halv sekund börjar kännas som väntan, och folk trycker bort väntan. | Animation | Det här gör den | Använd den till | | --- | --- | --- | | Lyft | Orden glider uppåt en kort sträcka och sätter sig | Lugna meddelanden, citat, redaktionella storyer | | Pop | Orden skalas in med en liten överskjutning | Erbjudanden, lanseringar, lekfulla varumärken | | Svep | En rad avslöjas från ena sidan | Rubriker med stark läsriktning | | Skrivmaskin | Bokstäverna visas en efter en | Frågor, teasers, korta krokar på några ord | Välj en per story. Skrivmaskin är långsammast, så håll raden kort annars skriver den fortfarande när folk trycker bort. Stegra rader snarare än ord: rubriken först, stödraden ett ögonblick senare, länkuppmaningen sist. Den ordningen matchar hur folk läser, och den gör att storyn ger mening även om någon går halvvägs. För fler mönster, inklusive kinetisk text, se [idéer för textanimation](https://gradiently.design/sv/guide/text-animation-ideas). Stående story med en rörlig gradientbakgrund som meddelar att en ny studio öppnar på fredag Rubriken lyfter in först, sedan detaljen. Båda ligger i mittbandet, fria från gränssnittet. Stående nedräkningsstory med texten två dagar kvar för en vårkollektion, på en mjuk animerad gradient En nedräkning som poppar in en gång. Bakgrunden fortsätter röra sig, så storyn känns levande medan orden står kvar. ## Timing av en animerad Instagram-story En stillbildsstory ligger kvar på skärmen i ungefär fem sekunder innan Instagram går vidare. En videostory spelas så länge klippet pågår, men uppmärksamheten är frontladdad: är första sekunden tom blir resten sällan sedd. Planera tidslinjen baklänges utifrån det. 1. **0 till 1 sekund: rubriken** Bakgrunden rör sig redan i första rutan. Rubriken är klar med sin ingång vid slutet av första sekunden. 2. **1 till 2 sekunder: stödet** Andra raden eller produkten kommer in. Använd samma animation som rubriken, med något mindre rörelse. 3. **2 till 3 sekunder: handlingen** Länkuppmaningen, datumet eller koden visas. Det är raden folk agerar på, så den behöver tid att läsas. 4. **Resten: håll** Inget nytt kommer in. Bakgrunden fortsätter glida så att storyn loopar utan synlig omstart. Sex till tio sekunder är en bekväm längd för en designad story med ett kort budskap. Längre klipp passar prat eller demonstration, inte en rubrik. Ska storyn loopa måste bakgrunden sluta där den började, vilket går igenom steg för steg i [sömlös loopvideo](https://gradiently.design/sv/guide/seamless-loop-video). > **Gör första rutan till en färdig design** Miniatyrer, förhandsvisningar och långsamma anslutningar kan visa första rutan ensam. Om dina ord animeras in från ingenting är den rutan en tom bakgrund. Låt rubriken vara delvis synlig från början, eller designa första rutan som en komplett stillbild. ## Storlek, säkra zoner och exportinställningar En animerad story använder samma ram som en stillbild: 1080×1920 pixlar, 9:16. Instagrams gränssnitt ligger över toppen och botten, så håll ord och logotyper i mittbandet. En vanlig arbetsregel är att lämna ungefär de översta och nedersta 250 pixlarna fria från text. Hela genomgången finns i [storlek på Instagram-story](https://gradiently.design/sv/guide/instagram-story-size). - Story och Reel 9:16: 1080 × 1920 - Flödesinlägg 4:5: 1080 × 1350 - Kvadrat 1:1: 1080 × 1080 Storyramen bredvid flödesformaten. Designa storyn i full höjd i stället för att sträcka ett flödesinlägg. | Inställning | Rekommendation | Varför | | --- | --- | --- | | Format | MP4 | Instagram spelar video direkt och håller gradienter mjuka | | Storlek | 1080×1920 px | Inget skalas om eller får svarta kanter | | Bildfrekvens | 30 bilder/s | Mjukt nog för långsam rörelse, små filer | | Ljud | Valfritt | Många tittar utan ljud, så orden måste bära budskapet | | Undvik | GIF-uppladdningar | 256 färger per ruta ger band i gradienter | Exportinställningar för en designad animerad story. GIF är det enda format du bör undvika här. Gränsen på 256 färger gör mjuka gradienter till ränder, och en rörlig story är video för Instagram, så ge den en. Jämförelsen finns i [GIF eller MP4](https://gradiently.design/sv/guide/gif-vs-mp4). ## Gör animerade storyer som inte ser ut som allas De flesta animerade storymallar använder samma handfull rörliga bakgrunder, så ett flöde fullt av dem flyter ihop. Bakgrunden är där ditt varumärke kan kännas igen innan någon läser ett ord. Ett rörligt färgfält som tillhör dig gör mer än en stocklopp någonsin kan. I Gradiently börjar en story på en **Mark**: en levande gradient- och materialbakgrund som rör sig av sig själv och är unik. Lägg till din rubrik, välj lyft, pop, svep eller skrivmaskin, så håller Marken sitt lugnaste område bakom orden medan auto-bläck väljer ljus eller mörk text rad för rad. Samma design kan sedan ändras till ett flödesinlägg eller en [Reels-bakgrund](https://gradiently.design/sv/guide/reels-tiktok-backgrounds) utan att byggas om. Videoexport ingår i Pro och sparar MP4 där din webbläsare stöder det. Minimal stående story med en enda rad om en ny meny över en långsamt rörlig gradient En långsam Mark bakom en stilla rad. Bakgrunden rör sig, orden gör det aldrig. ## FAQ ### Hur gör jag en animerad Instagram-story? Designa en ram på 1080×1920 med en rörlig bakgrund och en textanimation, håll orden i mittbandet, exportera den sedan som MP4 och ladda upp den som en story. De flesta designverktyg med videoexport kan göra det. ### Vilket format ska en animerad Instagram-story ha? MP4 i 1080×1920 pixlar. Undvik GIF: gränsen på 256 färger ger band i gradienter, och Instagram behandlar en rörlig story som video ändå. ### Hur lång ska en animerad Instagram-story vara? För en designad story med ett kort budskap är sex till tio sekunder bekvämt. Få rubriken på skärmen inom första sekunden, eftersom uppmärksamheten sjunker snabbt efter det. ### Varför ser min animerade story suddig eller randig ut? Oftast exporterades den som GIF, i fel storlek eller med låg bitrate. Exportera MP4 i exakt 1080×1920 så att Instagram inte behöver skala om något. ### Ska texten röra sig hela tiden? Nej. Låt orden animeras in en gång och stå stilla sedan. Rörlig text är svårare att läsa, och en långsamt rörlig bakgrund får redan storyn att kännas levande.