A lot of JavaScript libraries for animations exist at the present time. They all have the same functionality and it is always a problem, when it is necessary to decide, which tool should be used for a project. This article aims to provide information about most widely spread ones and gives libraries comparison with pure JavaScript and pure CSS solutions according to the following criteria: minimum, maximum and average number of frames per second. In addition, it pays attention to other important factors, which should be kept in mind while choosing library for a project: library demand and its support. Also memory consumption is taken into account. First section describes current situation with animation on the web: why animation is used and which ways of creating animation exist. Section two explains the choice of libraries reviewed in next sections. In section three an explanation of the choice of criteria of libraries comparison is presented. Section four describes performance test of animation 1000 and 3000 DOM nodes and provides results obtained and contains their description. As a conclusion, the results of the experiment are reviewed and recommendations are given about library choice according to the comparison results.
FPS
Anime.js
Popmotion During the last two decades, modern web has always been moving towards better user experience, design and interactivity. The stage if evolution, at which site developers created web pages in a static way, has expired. Currently, there are many ways to make a website better in these terms. One of them is animation, which is used to improve interactivity.
User, most likely, will prefer a site with a better user experience and design.
Thus, to be competitive in the modern World Wide Web, companies, teams and
? Copyright c 2019 for this paper by its authors. Use permitted under Creative
Commons License Attribution 4.0 International (CC BY 4.0).
isolated developers currently must develop visually attractive pages [
JavaScript being one of the most widely used programming languages [
The authors gathered statistics about all the libraries (see table 1).
One of the most important parameters [
Memory consumption is also an essential parameter to focus attention on. The high usage of memory may lead to animation delays, especially on low-end devices.
In spite of animation performance being an all-in-all parameter it is worth taking into consideration the development process. It is important to pay attention to how many contributors develop a project. If there are only a few contributors, the project can be closed at any time. Contrariwise, a project with many developers typically produces better product. Animation library demand is also a signi cant factor for consideration. If library is demanded, then there is huge probability that the most important problems are solved and that there exist a lot of tutorials and best practices. Furthermore, it is recommended to study how many issues have been registered and how many of them have been solved. This factor shows how active a project is. If the issues are not being solved, a project can become suspended. The nal list of parameters is: { Minimum, maximum and average FPS { Memory usage { Time spent on style recalculations, re ow, painting and layer compositing { Number of contributors { Animation library popularity { Open and closed issues 4
To compare the selected libraries Google Chrome developer tools and Mozilla Firefox Developer Edition developer tools were used. Libraries were additionally compared with solutions, which used only CSS and only JavaScript in the following way { 1000 and 3000 DOM nodes have been created and saved log produced by corresponding developer tools. All DOM nodes are similar { it is 100 pixels radius ball, which moves back and forth for 500 pixels distance.
As the performance test shows, the most performant library is GSAP. It has shown the highest average FPS during the test. In addition, it has the highest minimum FPS. As it can be seen, all solutions, except pure JavaScript, have maximum 60 FPS at 1000 nodes and satisfying FPS on average. Actually, 1000 nodes performance test (see Fig. 1) shows a big di erence in average FPS. So it was decided to conduct 3000 nodes performance test (see Fig. 2) and here are the results.
All the libraries have maximum 60 FPS at 1000 DOM nodes and, as expected, less FPS with 3000 DOM nodes. It is important to notice, that GSAP has roughly 2.45 times FPS decrease, while in the case of Popmotion this number is 4.45 times at 3000 DOM nodes test. Thus, Popmotion is the slowest library among the considered ones.
The best results are demonstrated by the pure JS and pure CSS solutions { they consume the lowest amount of memory. The fastest library, GSAP, takes more memory than other libraries. The library, which requires the least memory, is Anime.js
The time browser has spent on processing of these animations is considered next. Figure 3 clari es what are browser's stages of rendering elements on a page. { Style recalculation { browser determines which CSS rules should be applied to which DOM elements. { Update layer tree { when a browser knows which CSS rules to apply to the current element, it calculates which size element will be. This step can take a lot of time due to di erent relations between nodes, for instance, parent DOM node can a ect size of its children. { Paint { painting gives page color for back-grounds, text, shadows and so on.
Typically, a web page has multiple layers, so the painting comes over all the layers. { Composite layers { as it was previously said, a web page may have multiple layers to be painted. At this step, browser determines the order of these layers, which means that browser needs to determine, which layers should be at the top of other layers. It is especially important for the layers which have overlapping. temize We conducted same tests again and measured time spent on every stage. Those tests have shown the following results (see table 2 and 3). Although style recalculations, update layer tree, paint and composite layers are the most important parameters in terms of animation and smoothness of user interface, they do not have so much in uence in our case. These results do not show any performance correlation. It is worth mentioning, that the slowest library spent in an idle state most of its test time (6102 ms), whereas GSAP and Anime.js spent 202 ms and 7 ms respectively. There is a big di erence in FPS, but the idle state can not be considered as a factor, which in uences performance.
The next comparison criterion is popularity. The most popular library is Anime.js, which has 32.8 thousand of github stars. Then follows Popmotion having 17.3 thousand of github stars. The fastest library has only 9.8 thousand stars.
In terms of support Anime.js has the best numbers: 44 contributors, 96 open and 392 closed issues. At the same time, Popmotion has 53 contributors, 154 open and 367 closed issues, which is a bit worse than Anime.js. Finally yet importantly, GSAP has only two contributors, 2 open and 278 closed issues, what is not satisfactory, because the project depends on a small number of persons.
The last point we will consider in this article is memory usage. On the gure 4 the memory usage can be seen. For every approach considered, there are two bars on the chart: the blue bar represents memory allocation in 1000 DOM nodes test and the orange one represents memory allocation in 3000 DOM nodes test. All the tests were conducted for 30 seconds.
The best results show pure JS and pure CSS solutions { they consume the lowest amount of memory. The fastest library, GSAP, takes more memory than other libraries. The library, which requires the least memory, is Anime.js 5
We reviewed some of the most popular animation libraries, conducted performance tests and gathered information about how popular and supported libraries are. The most performant library is GSAP, so if there is need of the best performance, it is recommended for use. In addition, GSAP is the only library, which has plugin system and di erent utilities. Moreover, it is fairly compatible { it supports modern and old browsers and can be used alongside with jQuery, React, Vue and other frontend tools. In spite of its bene ts it has the following disadvantages: the biggest library size and the highest memory consumption. It is recommended for this library to decrease bundle size and memory usage.
In addition, GSAP has a huge disadvantage { the project is supported by a very small group of contributors. Therefore, for production usage Anime.js is recommended { it is not so performant, however, it is the most demanded animation library, which has a lot of contributors, good documentation and well supported.
The last library { Popmotion { has shown the lowest FPS on average, but it has the lowest size { only 11.3 Kilobytes. This library can be used for very small projects, where bundle size is critical. If this library increases FPS shown, it can improve its popularity and total market usage.
The results of using non-libraries approaches are the following: pure JavaScript and CSS solutions have the lowest amount of memory usage. Pure JavaScript solution shows the smallest FPS on average, but this approach is more exible than pure CSS. However, pure CSS has the highest average FPS in 3000 DOM nodes test, so it is recommended for use in case of simple animations. As a result, GSAP has the best performance among other libraries, Anime.js has the best support, which is important for real projects, and Popmotion has the lowest size.
web, accessed gaming, accessed