Blogi — — Tuomas

Animaatiot verkkosivustolla: Case Boco IP

Boco IP:n sivusto oli G-Worksille harppaus eteenpäin front-endin parissa. Kerromme hieman, minkälaisia tekniikoita toteutuksessa käytettiin.

Animaatioita koodin avulla

Julkaisimme vuoden alussa uuden verkkosivuston Boco IP:lle. Verkkosivustoa lähdettiin työstämään hyvinkin kunnianhimoisella asenteella ja sen taustasta voit lukea lisää case-esittelystämme. Tässä blogissa käydään läpi miten sivuston animoinnit toteutettiin teknisesti.

Suuremmalla otannalla modernit verkkosivustot ovat vielä suurilta osin staattisia, liikettä on totuttu näkemään lähinnä hiirtä liikutettaessa elementtien päällä. Nykyisin verkkosivustojen käyttökokemusta kehitetään suuntaan, jossa siirtymät ovat ainakin jollain tasolla saumattomia – ettei käy niin, että tuijotellaan sekunti valkoista ruutua joka sivunvaihdolla.

Animointien rakentaminen

Yleinen harhaluulo on ollut pitkään, että JavaScript-animaatiot olisivat huomattavasti CSS-animaatioita raskaampia ja tehottomampia. Tieto pitää paikkaansa jQuery-animaatioiden osalta, mutta pelkkä JavaScript on animaatioiden tekoon kohteesta riippuen yhtä tehokas tai jopa tehokkaampi. Tästä ovat kirjoittaneet artikkeleita esimerkiksi Google ja GSAP.

Se, mihin JavaScript ja sille luodut kirjastot soveltuvat CSS:ää paremmin, ovat monimutkaiset ja raskaat animoinnit. Jos sinun tarvitsee miettiä monivaiheisia animaatioita, ajastuksia tai kontrolleja animaatioille, niin yleensä JavaScript on parempi vaihtoehto. CSS on taas parempi valinta yksinkertaisiin elementin tyylien muuttamisiin.

GSAP (GreenSock Animation Platform) on kirjasto animaatioiden tekoon JavaScriptillä (tai Flashilla). Yksinkertaisimmillaan animaatiolle annetaan elementti, jolle animaatio ajetaan, animaation kesto sekä animoitavat arvot. Annettavia lisämääreitä ovat muun muassa animaation easing sekä viive.

// fadeIn animaatio jolla elementti ilmestyy vähitellen näkyviin 0.5 sekunnin aikana
new TweenLite( '.element', 0.5, {opacity:0} );

GSAP valittiin projektiin sen monipuolisuuden vuoksi. GSAP:n tilalla oltaisiin voitu käyttää myös monia muita kirjastoja kuten velocity.js:ää tai anime.js:ää. Näiden etuna GSAP:hen on erityisesti pieni koko, mutta ne eivät tähän projektiin tarjonneet tarpeeksi ominaisuuksia.

Ehdottomasti yksi parhaimmista ominaisuuksista GSAP:ssa on sen TimelineLite/Max-luokka. Sen avulla animaatiot voidaan laittaa aikajanalle, joka ajautuu järjestyksessä. Animaatiot voidaan laittaa janalle myös ajautumaan samanaikaisesti tai viiveellä.

// Animaatiosarja jossa elementti siirtyy ensin 100px oikealle, sitten 100px alas ja lopulta häipyy pois näkyvistä
var timeline = new TimelineLite();
timeline.add( new TweenLite( '.element', 0.5, { x: 100 } ) );
timeline.add( new TweenLite( '.element', 0.5, { y: 100 } ) );
timeline.add( new TweenLite( '.element', 0.5, { opacity: 0 } ) );

Uusilla verkkosivuilla käytetään nykyään enemmän SVG-elementtejä erilaisten monimutkaisempien ”häkkyröiden” toteutuksessa. Näiden animointi on ollut, jos ei haasteellista, niin ainakin työlästä. GSAP:n työkalut tekevät SVG-elementtien animoinnista yhtä yksinkertaista kuin verkkosivujen tavallisten DOM-elementtien. Maksullisella DrawSVG-lisäosalla onnistuu myös SVG-elementtien reunaviivojen animointi, jolla saa tehtyä näyttäviäkin animaatioita.

Sivunvaihdot ja Animaatioiden käynnistykset

Verkkosivustoilla sivunvaihdot ovat yleensä töksähtäviä, jossa vanha sisältö katoaa ja uusi ilmestyy tilalle. Boco IP:n tapauksessa sivunvaihdot haluttiin sulaviksi niin, että vanhat sisältöelementit animoituvat pois ja uudet animoituvat tilalle. Tässä projektissa kyseinen ominaisuus toteutettiin SmoothState.js-kirjaston avulla, joka linkkiä klikatessa lataa sivun sisällön Ajaxilla ja huolehtii URL-osoitteen vaihdosta.

Toinen houkutteleva vaihtoehto oli käyttää WordPressin uutta REST API:a ja esimerkiksi Reactia, joka olisi tehnyt SmoothStaten tarpeettomaksi. Ajatuksesta kuitenkin luovuttiin varhaisessa vaiheessa, koska REST API:n nuoren iän takia kaikkia sen ongelmia ja heikkouksia ei vielä tiedetä.

Sivunvaihtojen lisäksi Boco IP:n sivustolla elementtejä animoidaan esiin vasta sivua scrollatessa. Elementtien esiintuloanimaatiot käynnistyvät vasta kun kyseinen elementti on tullut joko osittain tai kokonaan näkyviin. Näin animaatiot eivät jää käyttäjältä piiloon pienillä ruuduilla tai pitkissä sivukokonaisuuksissa.

Kokonaisuuden hallinnoimiseksi sivustoa varten rakennettiin oma JavaScript-kirjasto, joka integroi animoinnit, SmoothStaten ja GSAP:n keskenään. Yksittäisille elementeille annetaan animointityylit, joiden perusteella kirjasto käynnistää halutut animaatiot aina tarvittaessa.

Taustatekniikka ja WordPressin puoli on meillä ollut jo pidempään hallussa. Nyt kun runko on kohdillaan, ryhdymme panostamaan ulkokuoren kiiltävyyteen. Jatkossa meiltä voi siis odottaa yhä näyttävämpiä toteutuksia.

P.S. Bocon sivuto ehti jo kerätä muutaman huomionosoituksenkin: saimme Awwwardissa Honorable Mentionin ja CSS Design Awardsissa Special Kudos’n!

Tuomas Velling Johtava ohjelmistosuunnittelija, partner

Tuomas vastaa G-Worksin ohjelmistotuotannosta ja kaitsee ohjelmointiopetuslapsiaan kohti parempaa koodia.