Tekstianimaatiot: nousu, ponnahdus, pyyhkäisy, kirjoituskone

Somessa neljä tekstianimaatiota tekee lähes kaiken: nousu (sanat liukuvat ylös ja ilmestyvät pehmeästi, rauhallinen ja arvokas), ponnahdus (sanat suurenevat näkyviin pienellä pompulla, lyhyt ja voimakas), pyyhkäisy (rivi paljastuu yhdestä reunasta kuin verho) ja kirjoituskone (kirjaimet ilmestyvät yksi kerrallaan kuin juuri kirjoitettuina). Sovita tyyli viestiin, pidä saapuminen alle noin kolmen neljäsosasekunnin mittaisena ja jätä teksti sitten paikalleen kahden lukukerran ajaksi. Käytä yhtä tyyliä julkaisua kohti. Siinä on suurin osa taidosta.

Neljä tekstianimaatiota yhdellä silmäyksellä

Nousu: turvallinen ja arvokas oletus

Nousu siirtää jokaista riviä hieman ylöspäin samalla kun se ilmestyy näkyviin, ja antaa sen sitten asettua. Koska liike on pieni ja hidastuu, silmä lukee sanat lähes heti niiden ilmestyessä. Tämä on sopiva oletus rauhallisuutta tavoitteleville brändeille: hotelleille, studioille, ihonhoidolle, arkkitehtuurille ja konsulttitoimistoille.

Porrasta rivit noin 100:sta 150 millisekuntiin, jotta ne ilmestyvät peräkkäin. Porrasta sanoja vain hyvin lyhyillä riveillä. Kirjainten porrastus nousutehosteessa näyttää levottomalta.

Ponnahdus: lyhyille sanoille, joiden pitää osua

Ponnahdus suurentaa sanan hieman pienemmästä koosta, ylittää tavoitekoon vähän ja asettuu. Siinä on energiaa, joten se sopii iskeviin sanoihin: hinta, prosentti, ”Loppuunmyyty”, ”Tänään”, ”Viimeinen päivä”. Pitkissä lauseissa se ei toimi, sillä ne heiluvat iskevyyden sijaan.

Pyyhkäisy: paljasta otsikko kuin verho

Pyyhkäisy paljastaa rivin reunasta toiseen. Sanat ilmestyvät lukujärjestyksessä liikkumatta. Se tuntuu harkitulta ja elokuvalliselta. Kirjaimet pysyvät paikoillaan, joten se on yksi luettavimmista saapumistavoista. Käytä otsikoihin, ”ennen”-riville, joka pyyhkiytyy pois ”jälkeen”-rivin tieltä, tai videon lopussa paljastuvaan nimeen.

Pyyhkäise lukusuuntaan: vasemmalta oikealle englannissa ja useimmissa eurooppalaisissa kielissä. Vastakkaiseen suuntaan tehty pyyhkäisy tuntuu tekstin poistamiselta.

Kirjoituskone: sanat syntyvät tässä hetkessä

Kirjoituskone paljastaa kirjaimet yksi kerrallaan. Se on muita kolmea hitaampi, ja juuri se on tarkoitus: rivi tuntuu henkilökohtaiselta, kuin joku kirjoittaisi sinulle nyt. Käytä kysymyksiin, lyhyisiin sitaatteihin, vinkkeihin ja kulissien takaisiin huomioihin. Pidä rivi lyhyenä, sillä lauseen on valmistuttava ennen kuin sen voi lukea. Sen jälkeen tarvitaan vielä paikallaanoloaikaa.

Oikean tekstianimaation valinta

1. 1

   Aloita viestistä

   Rauhallinen uutinen nousee. Kiireinen uutinen ponnahtaa. Paljastus pyyhkäisee. Henkilökohtainen viesti kirjoittuu.

2. 2

   Laske sanat

   Yhdestä kolmeen sanaa sopii mihin tahansa tyyliin. Pitkät rivit toimivat parhaiten nousulla tai pyyhkäisyllä. Vältä ponnahdusta ja kirjoituskonetta.

3. 3

   Valitse yksi tyyli julkaisua kohti

   Saapumistyylien sekoittaminen samassa ruudussa näyttää tehosteilla esittelevältä mallipohjalta. Yhtenäisyys tekee liikkeestä brändin mukaista.

4. 4

   Aseta paikallaanoloaika

   Kun viimeinen sana asettuu, pidä ruutu paikallaan kahden lukukerran ajan. Tarinat etenevät automaattisesti, joten tämä on erityisen tärkeää Instagram-tarinoissa.

5. 5

   Katso puhelimella ilman ääntä

   Moni katsojasi näkee sen juuri niin. Jos jokin rivi on vaikea ehtiä lukea, hidasta tai karsi sanoja.

Kopioitavat CSS-tekstianimaatiot

Verkkosivulla samat neljä tyyliä onnistuvat kukin muutamalla CSS-rivillä. Pidä ne lyhyinä, toista vain kerran ja poista käytöstä ihmisiltä, jotka suosivat vähennettyä liikettä.

/* 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; }
}

Liikekäyrät merkitsevät yhtä paljon kuin kestot. Liikkeen pehmennys selittää, miksi nousun pitäisi hidastua ja ponnahduksen ylittää tavoite hieman. Liikkuvan typografian laajempaa taitoa käsittelee kineettinen typografia.

Tekstin animointi Gradientlyssä

Gradientlyn Studiossa nämä neljä tekstianimaatiota, Nousu, Ponnahdus, Pyyhkäisy ja Kirjoituskone, ovat käytettävissä kaikille tekstitasoille. Taustalla voi liikkua hitaasti Mark. Mark pitää rauhallisimman alueensa tekstin alla liikkuessaan, joten rivit pysyvät luettavina koko animaation ajan. Prolla viet tarinat ja Reels-videot GIF-muodossa tai MP4- ja WebM-muodossa selaimen tukiessa tallennusta. Animoidut Instagram-tarinat ja GIF vai MP4 auttavat tiedostomuodon valinnassa.