A comparison of current solutions for creating web animations on Apple hardware

Abstract

The content available online consists of titles, texts, images, and multimedia, including animations. Some animations are immediately noticeable, while others are less obvious, yet they play an important role in the interactivity of a website. When implemented correctly and working properly, animations can greatly enhance the user experience. In the theoretical part of this paper, the basic technologies of the web are introduced. These are Hypertext Markup Language, Cascading Style Sheets (CSS) and JavaScript. The history of web animations is presented as well as the perception of animations in terms of the qualities required by the human eye to perceive them as fluid. In the experimental part, methods for creating animations were selected for testing. These were CSS animations, Web Animations Application Programming Interface (WAAPI) and Lottie animations. For each of these methods, an identical animation was designed and implemented on a website. The animations were then tested with a different number of elements in two browsers on multiple devices and Apple hardware. During creation and testing, an analysis was made of how difficult it is to design and implement the animations on a website, and how powerful they are: the ability to display a high number of frames per second, how much memory they require on the graphics card, and how much data must be transferred from the server for them to play properly. The results were recorded and summarised. Some recommendations were made in the results, i.e. which method to use depending on the intended use case. The CSS and WAAPI animations and transitions were found to be more suitable for complex web animations, while Lottie was found to be useful for simpler animations.