CSS and JavaScript Animations

Abstract

This Master’s thesis studies two different animation methods for web applications, CSS animations and the Web Animations API. CSS animations are created with regular CSS syntax with keyframes, while Web Animations are created in JavaScript. Gaining overall knowledge about animating web components and available alternative methods were the motivation for this thesis.

The thesis aims to answer two questions: which animation method fits React web development better, and what limitations or advantages the animation methods have. The implemented project for this thesis was creating two toast components, with the main difference being the animation approach. The components were created in React application initialized with Next.js framework. The developer experience and the resulting toasts were then analysed for differences and suitability.

Main factors for the analysis were the developer experience, complexity of the implementations, limitations and performance. The research suggests that the Web Animations API method is more suitable with React development. The method had more fitting programming paradigm, ability to run more than 1 concurrent animations on a single element, and no practical difference in performance when compared with CSS animations. Additionally, Web Animations provides improved control of the animation’s runtime and handling of dynamic values. Similar results can be achieved with CSS animations, but it may lead to more complex implementation.

This thesis enables future work related to the topic. Larger scale performance analysis may be required to get decisive results on that aspect. A survey and development experience studies by test groups could grant more insight to the popularity and useability of Web Animations. Lastly, studying the capabilities and innovative use cases of Web Animations could be looked further in complex animations.

Tämä diplomityö tutkii kahta eri web-applikaatioiden animointimenetelmää, CSS-animaatioita ja Web Animaatiot API:a. CSS-animaatiot luodaan perinteisellä CSS-syntaksilla keyframes:ien avulla, kun taas Web Animaatiot luodaan JavaScript:ssä. Yleisen tietämyksen saaminen web komponenttien animoimisesta ja vaihtoehtoisista animaatiomenetelmistä olivat tämän diplomityön motivaatioina.

Diplomityö pyrkii vastaamaan kahteen tutkimuskysymykseen: kumpi animaatiomenetelmä sopii paremmin React web kehittämisen kanssa, ja mitä rajoituksia tai etuja menetelmillä on. Diplomityölle toteutettu projekti oli kahden toast-komponentin luominen, joiden pääasiallinen ero oli niiden lähestymistapa animoimiseen. Komponentit luotiin React-applikaatiossa, joka oli alustettu Next.js ohjelmistokehyksellä. Kehittäjäkokemusta ja tuotettuja toast-komponentteja analysoitiin erojen ja sopivuuden kannalta.

Tärkeimmät tekijät analyysissä olivat kehittäjäkokemus, toteutuksien kompleksisuus, rajoitukset ja suorituskyky. Tutkimus osoittaa, että Web Animaatiot API animointimenetelmä olisi sopivampi React web kehityksen kanssa. Menetelmällä oli sopivampi ohjelmointiajatusmalli, kyky ajaa useampaa kuin yhtä samanaikaista animaatiota yksittäisessä elementissä, ja käytännössä ei eroja suorituskyvyssä CSS animaatioihin verrattuna. Lisäksi, Web Animaatiot tarjoavat parannetun animaatioiden suorituksen aikaisen kontrollin ja dynaamisten arvojen käsittelyn. Vastaavanlaisia tuloksia voidaan saavuttaa CSS-animaatioilla, mutta se voi johtaa monimutkaisempiin toteutuksiin.

Diplomityö mahdollistaa jatkotutkimuksia kyseisestä aiheesta. Suuremman skaalan suorituskykyanalyysi vaadittaisiin lopullisiin tuloksiin suorituskyvyn suhteen. Kysely ja kehittäjäkokemuksen tutkiminen testiryhmissä voisi antaa lisää tietoa Web Animaatioiden suosiosta ja käytännöllisyydestä. Viimeiseksi, Web Animaatioiden mahdollisuuksien ja innovatiivisten käyttötarkoitusten tutkiminen monimutkaisten animaatioiden kanssa voisi olla kannattavaa.