# Animoitu Instagram-tarina, joka pitää huomion [Canonical HTML page](https://gradiently.design/fi/guide/animated-instagram-story) Tarina saa sekunnin tai kaksi ennen peukalon siirtymistä. Oikea liike ansaitsee loppuruudun huomion, väärä vain vaikeuttaa sanojen lukemista. ## The short version - Animoitu Instagram-tarina on 1080×1920-video, yleensä lyhyt silmukka, jota käytetään still-tarinan sijaan. - Luettavimmissa animoiduissa tarinoissa tausta liikkuu hitaasti, sanat saapuvat kerran ja jäävät paikalleen. - Ensimmäinen sekunti merkitsee eniten, joten otsikon tulee olla kokonaan näkyvissä noin sekunnin sisällä. - Lataa animoidut tarinat MP4-videoina koossa 1080×1920 GIFin sijaan, jotta liukuvärit pysyvät tasaisina. - Pidä tekstit ja logot poissa ylä- ja alareunasta, joihin Instagram piirtää käyttöliittymänsä. **Animoitu Instagram-tarina** toimii, kun yksi asia liikkuu tarkoituksella ja muu pysyy luettavana. Tausta ajelehtii hitaasti, otsikko saapuu lyhyellä animaatiolla kerran ja jää paikalleen. Mitään tärkeää ei ole 1080×1920-kuvan ylä- tai alareunassa. Vie MP4 GIFin sijaan ja varmista, että ensimmäinenkin ruutu näyttää valmiilta suunnitelmalta. Osa näkee vain sen. ## Minkä pitäisi liikkua animoidussa tarinassa Tarinaa katsotaan hetki käsivarren mitan päästä, usein äänettömänä. Liike vetää katsetta, joten jokainen liikkuva asia kilpailee sanojesi kanssa. Huomion säilyttävä tarina valitsee yhden rauhallisen liikkuvan tason ja antaa tekstin tehdä työnsä. Vilkas tarina näyttää editorissa energiseltä, puhelimessa uuvuttavalta. ### Väsyttävä katsoa - Jokainen tekstirivi animoituu eri tavalla - Sanat jatkavat liikettä saapumisen jälkeen - Nopea suurikontrastinen tausta pienen tekstin takana - Tarrat, GIFit ja tehosteet yhdessä ruudussa - Otsikko ilmestyy vasta kolmen sekunnin jälkeen ### Säilyttää huomion - Yksi tekstianimaatiotyyli koko tarinalle - Sanat saapuvat ja pysyvät täysin paikallaan - Hidas tausta ja rauhallinen alue sanojen takana - Yksi tarkoituksella valittu liikkuva elementti - Otsikko luettavana sekunnissa Sama periaate koskee hyvää liikesuunnittelua logoista verkkosivuihin. [Liikesuunnittelun periaatteet](https://gradiently.design/fi/guide/motion-design-principles) käsittelee ajoitusta, pehmennystä ja hierarkiaa tarkemmin. ## Neljä tarinoissa toimivaa tekstianimaatiota Tekstianimaatio on tarinan hyödyllisin liike, sillä se kertoo katseelle mistä aloittaa. Pidä se lyhyenä. Yli noin puolen sekunnin sisääntulo tuntuu odottamiselta, ja odotuksen yli napautetaan. | Animaatio | Mitä tekee | Käytä | | --- | --- | --- | | Nousu | Sanat liukuvat lyhyesti ylös ja asettuvat | Rauhalliset ilmoitukset, lainaukset, toimitukselliset tarinat | | Pomppu | Sanat kasvavat hieman lopullisen koon yli | Tarjoukset, julkaisut, leikkisät brändit | | Pyyhkäisy | Rivi paljastuu yhdeltä sivulta | Otsikot joilla on vahva lukusuunta | | Kirjoituskone | Kirjaimet ilmestyvät peräkkäin | Kysymykset, ennakkomaistiaiset, muutaman sanan koukut | Valitse yksi tarinaa kohden. Kirjoituskone on hitain, joten pidä rivi lyhyenä, ettei kirjoitus jatku katsojan siirtyessä eteenpäin. Porrasta rivit, älä sanoja: otsikko ensin, tukirivi hetkeä myöhemmin ja linkkikehotus viimeisenä. Järjestys vastaa lukemista, joten tarina on ymmärrettävä kesken poistuttaessakin. Lisää malleja ja kineettistä tekstiä tarjoaa [tekstianimaatioideat](https://gradiently.design/fi/guide/text-animation-ideas). Pystytarina liikkuvalla liukuväritaustalla ilmoittaa uuden studion avautuvan perjantaina Otsikko nousee ensin, sitten tukirivi. Molemmat ovat keskialueella poissa käyttöliittymän tieltä. Pystytarina, jossa Kaksi päivää jäljellä kertoo kevään valikoimasta pehmeällä animoidulla liukuvärillä Laskenta pompahtaa kerran. Tausta jatkaa liikettä, joten tarina tuntuu elävältä sanojen pysyessä. ## Animoidun Instagram-tarinan ajoitus Still-tarina näkyy noin viisi sekuntia ennen Instagramin etenemistä. Videotarina kestää leikkeen ajan, mutta huomio painottuu alkuun. Jos ensimmäinen sekunti on tyhjä, loppua nähdään harvoin. Suunnittele aikajana tästä lähtien. 1. **0-1 sekuntia: otsikko** Tausta liikkuu jo ensimmäisessä ruudussa. Otsikon sisääntulo päättyy ensimmäisen sekunnin loppuun. 2. **1-2 sekuntia: tuki** Toinen rivi tai tuote saapuu samalla animaatiolla kuin otsikko mutta hieman pienemmällä liikkeellä. 3. **2-3 sekuntia: toiminta** Linkkikehotus, päivä tai koodi ilmestyy. Tähän reagoidaan, joten rivin lukemiseen tarvitaan aikaa. 4. **Loppu: pidä** Mitään uutta ei saavu. Tausta jatkaa liikettä, jotta silmukka palaa alkuun huomaamatta. Kuudesta kymmeneen sekuntia on sopiva kesto lyhyen viestin suunnitellulle tarinalle. Pidemmät leikkeet sopivat puheeseen tai esittelyyn, eivät otsikkoon. Silmukan taustan tulee päättyä lähtöpisteeseen. [Saumaton videosilmukka](https://gradiently.design/fi/guide/seamless-loop-video) opastaa vaiheittain. > **Tee ensimmäisestä ruudusta valmis suunnitelma** Pienoiskuvat, esikatselut ja hidas yhteys voivat näyttää ensimmäisen ruudun yksin. Jos sanat ilmestyvät tyhjästä, ruutu on tyhjä tausta. Aloita otsikko osittain näkyvänä tai tee ensimmäisestä ruudusta valmis still-kuva. ## Koko, suoja-alueet ja vientiasetukset Animoitu tarina käyttää samaa kehystä kuin still: 1080×1920 pikseliä, 9:16. Instagramin käyttöliittymä peittää ylä- ja alareunat, joten pidä sanat ja logot keskellä. Tavallinen työsääntö on jättää noin 250 pikseliä ylhäältä ja alhaalta ilman tekstiä. Tarkempi erittely: [Instagram-tarinan koko](https://gradiently.design/fi/guide/instagram-story-size). - Tarina ja Reel 9:16: 1080 × 1920 - Syötejulkaisu 4:5: 1080 × 1350 - Neliö 1:1: 1080 × 1080 Tarina syöteformaattien rinnalla. Suunnittele täydelle korkeudelle syötekuvan venyttämisen sijaan. | Asetus | Suositus | Miksi | | --- | --- | --- | | Muoto | MP4 | Instagram toistaa videon suoraan ja säilyttää tasaiset liukuvärit | | Koko | 1080×1920 px | Ei skaalausta eikä mustia palkkeja | | Kuvataajuus | 30 fps | Riittävän tasainen hitaalle liikkeelle, pienet tiedostot | | Ääni | Valinnainen | Moni katsoo äänettömänä, joten sanat kantavat viestin | | Vältä | GIF-latauksia | 256 väriä ruudussa raidoittaa liukuvärit | Suunnitellun animoidun tarinan vientiasetukset. Vältä tässä GIFiä. Sen 256 värin raja muuttaa pehmeän liukuvärin raidoiksi. Instagramille liikkuva tarina on video, joten anna sille sellainen. Vertailu: [GIF ja MP4](https://gradiently.design/fi/guide/gif-vs-mp4). ## Omaleimaiset animoidut tarinat Useimmat animoidut tarinapohjat käyttävät samoja liikkuvia taustoja, joten ne sulautuvat yhteen syötteessä. Tausta voi tehdä brändistä tunnistettavan ennen ensimmäistä sanaa. Oma liikkuva värikenttä tekee enemmän kuin valmis videosilmukka. Gradientlyssä tarina alkaa **Markilta**: ainutlaatuiselta elävältä liukuväri- ja materiaalitaustalta, joka liikkuu itsenäisesti. Lisää otsikko ja valitse nousu, pomppu, pyyhkäisy tai kirjoituskone. Mark pitää rauhallisimman alueen sanojen takana, ja Automaattinen muste valitsee vaalean tai tumman tekstin rivittäin. Saman työn voi muuttaa syötejulkaisuksi tai [Reels-taustaksi](https://gradiently.design/fi/guide/reels-tiktok-backgrounds) rakentamatta uudelleen. Videovienti kuuluu Prohon ja tallentaa MP4:n sitä tukevassa selaimessa. Pelkistetty pystytarina uuden menun rivillä hitaasti liikkuvan liukuvärin päällä Hidas Mark yhden paikallaan pysyvän rivin takana. Tausta liikkuu, sanat eivät. ## FAQ ### Miten teen animoidun Instagram-tarinan? Suunnittele 1080×1920-kehys liikkuvalla taustalla ja yhdellä tekstianimaatiolla. Pidä sanat keskialueella, vie MP4 ja lataa tarinaksi. Useimmat videovientiä tukevat suunnittelutyökalut pystyvät tähän. ### Missä muodossa animoitu Instagram-tarina viedään? MP4 koossa 1080×1920. Vältä GIFiä: 256 värin raja raidoittaa liukuvärit, ja Instagram käsittelee liikkuvan tarinan videona. ### Kuinka pitkä animoidun Instagram-tarinan pitäisi olla? Lyhyen viestin suunniteltuun tarinaan sopii kuudesta kymmeneen sekuntia. Näytä otsikko ensimmäisen sekunnin aikana, sillä huomio vähenee nopeasti. ### Miksi animoitu tarinani on sumea tai raidallinen? Yleensä vienti oli GIF, väärän kokoinen tai liian pienellä bittinopeudella. Vie MP4 täsmälleen koossa 1080×1920, ettei Instagramin tarvitse skaalata. ### Pitäisikö tekstin liikkua koko ajan? Ei. Anna sanojen saapua kerran ja jäädä paikalleen. Liikkuvaa tekstiä on vaikeampi lukea, ja hidas taustaliike pitää tarinan jo elävänä.