=Paper=
{{Paper
|id=Vol-2590/short9
|storemode=property
|title=Approaches towards the Comparison and Utilization of JavaScript Animation Libraries
|pdfUrl=https://ceur-ws.org/Vol-2590/short9.pdf
|volume=Vol-2590
|authors=Nikita Vozisov,Ilya Gosudarev,Irina Gotskaya
|dblpUrl=https://dblp.org/rec/conf/micsecs/VozisovGG19
}}
==Approaches towards the Comparison and Utilization of JavaScript Animation Libraries==
https://ceur-ws.org/Vol-2590/short9.pdf
Approaches towards the Comparison and
Utilization of JavaScript Animation Libraries?
Nikita Vozisov1[0000−0002−2558−2946] , Ilya Gosudarev2[0000−0003−4236−5991] , and
Irina Gotskaya3[0000−0003−3074−8936]
1
ITMO University, Saint Petersburg, Russia nikitavozisov2108@gmail.com
2
ITMO University, Saint Petersburg, Russia goss@itmo.ru
3
ITMO University, Saint Petersburg, Russia iringot@yandex.ru
Abstract. 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 solu-
tions according to the following criteria: minimum, maximum and aver-
age 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 consump-
tion 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 ob-
tained 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.
Keywords: animation · JavaScript · FPS · Anime.js · Popmotion ·
GSAP · developer tools.
1 Introduction
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 Com-
mons License Attribution 4.0 International (CC BY 4.0).
2 Nikita Vozisov, Ilya Gosudarev, and Irina Gotskaya
isolated developers currently must develop visually attractive pages [1]. There-
fore, website developers need to choose a way how to add an animation to their
application. A large number of techniques and technologies exist which help to
create animations, including:
– Pure CSS
– Pure JavaScript, changing CSS properties of DOM element
– SVG animation
– Canvas HTML element
– Animation libraries
– And some others
The simplest approach is to use animation libraries, because they solve different
performance problems, which developers otherwise would have to solve on their
own. In addition, they support the vast majority of browsers, so no fallback or
workarounds need to be provided. Therefore, next step is library choice.
2 Animation library selection
JavaScript being one of the most widely used programming languages [5, 6], it
has grown a significant ecosystem of libraries. Hence, it is a hard problem to
solve, which library to choose. According to articles [2, 3] and github search for
animation libraries [4], it was decided to consider the following libraries:
– Anime.js [7]. Lightweight JavaScript animation library with a simple, yet
powerful API. It is able to change CSS properties, animate SVG, DOM
attributes and JavaScript objects [8]. This library allows to bind multiple
animation properties, create timelines and more. To create an animation an
anime() function must be called and provided with an options object with
properties, which have to be animated.
– Popmotion [9]. As a part of Popmotion, in this article Popmotion pure is
considered [10] – a functional, flexible JavaScript library for animation. It is
more similar to Anime.js, but it requires styler() – a special library function
to be called with DOM element. Thus, all the DOM nodes should be received
before they can be animated. After all the styled nodes obtained, tween()
function can be applied to create animation.
– GSAP [11]. This library is a little bit harder to install – additionally tran-
spiler packages must be installed: @babel/preset-env and @babel/core. De-
spite it, as stated on GSAP website it solves countless browser inconsistencies
at high speed. To create an animation, timeline is supposed to be created
and animation is supposed to be added to this timeline. It supports CSS
selectors.
The authors gathered statistics about all the libraries (see table 1).
Title Suppressed Due to Excessive Length 3
Table 1. Libraries parameter list
Parameter Anime.js [9] Popmotion [11] GSAP [13]
Github stars (thousand) 32.8 17.3 9.8
Contributors 44 53 2
Open/closed issues 96/392 154/367 2/278
Size, Kb 14 11.7 36
3 Selection of comparison criteria
One of the most important parameters [15] for any graphics, and animation in
particular, is FPS (frames per second) [14]. Basically, FPS defines how smooth
animation will be, so the higher FPS, the smoother the animation. To conduct
fair test, the following FPS metrics are considered: minimum FPS, maximum
FPS and average FPS. In addition, a web browser’s activity has to be consid-
ered: how much time it spends on style recalculation, reflow, painting and layer
compositing. The influence of these stages on animation performance has to be
explored. The more time browser spends on earlier stages, the more time it will
spend on later stages. Hence, the most performant library does less style recal-
culations, for example.
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 at-
tention 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 significant 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 final list of parameters is:
– Minimum, maximum and average FPS
– Memory usage
– Time spent on style recalculations, reflow, painting and layer compositing
– Number of contributors
– Animation library popularity
– Open and closed issues
4 Animation libraries comparison
To compare the selected libraries Google Chrome developer tools and Mozilla
Firefox Developer Edition developer tools were used. Libraries were addition-
ally compared with solutions, which used only CSS and only JavaScript in the
4 Nikita Vozisov, Ilya Gosudarev, and Irina Gotskaya
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.
Fig. 1. One thousand nodes test results
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 difference 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 clarifies what are browser’s stages of rendering elements on a
page.
Title Suppressed Due to Excessive Length 5
Fig. 2. Three thousand nodes test results
Fig. 3. Browsers rendering pipeline
6 Nikita Vozisov, Ilya Gosudarev, and Irina Gotskaya
– 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 different relations between nodes, for instance, parent
DOM node can affect 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).
Table 2. 1000 DOM nodes test result
Time spent (ms) on Anime.js Popmotion GSAP pure JS Pure CSS
Style recalculations 1667.8 (54.9 %) 1005.5 (41.9 %) 1013.7 (42.6 %) 81.2 (0.8 %) 4996.2 (61.5 %)
Update layer tree 423.0 (13.9 %) 533.4 (22.2 %) 588.6 (24.8 %) 21.5 (0.2 %) 1644.2 (20.2 %)
Paint 7.1 (0.2 %) 38.1 (1.6 %) 20.3 (0.9 %) 4.0 (0.0 %) 297.4 (3.7 %)
Composite layers 18.4 (0.6 %) 111.3 (4.6 %) 119.4 (5.0 %) 0.7 (0.0 %) 66.9 (0.8 %)
Table 3. 3000 DOM nodes test result
Time spent (ms) on Anime.js Popmotion GSAP pure JS Pure CSS
Style recalculations 1697.5 (43.1 %) 1016.8 (38.1 %) 1056.4 (41.2 %) 401.7 (4.1 %) 5208.8 (61.2 %)
Update layer tree 500.8 (12.7 %) 537.7 (20.2 %) 543.4 (21.2 %) 0.0 (0 %) 1839.1 (21.6 %)
Paint 17.6 (0.4 %) 61.4 (2.3 %) 41.9 (1.6 %) 0.0 (0 %) 318.2 (3.7 %)
Composite layers 6.4 (0.2 %) 106.9 (4.0 %) 119.5 (4.7 %) 0.0 (0 %) 24.3 (0.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 influence in our case. These re-
sults 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 difference in FPS, but the idle state can not be considered as a factor,
which influences 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
Title Suppressed Due to Excessive Length 7
having 17.3 thousand of github stars. The fastest library has only 9.8 thou-
sand 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 figure 4
the memory usage can be seen.
Fig. 4. Memory allocation
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 Conclusion
We reviewed some of the most popular animation libraries, conducted per-
formance 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 different utilities. Moreover, it is
fairly compatible – it supports modern and old browsers and can be used
8 Nikita Vozisov, Ilya Gosudarev, and Irina Gotskaya
alongside with jQuery, React, Vue and other frontend tools. In spite of its
benefits 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 flexi-
ble 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.
References
1. Zajceva E.N., Manvelov N.S: “Animacija v veb-dizajne: preimushhestva
ispol’zovani-ja.” Nauka i obshhestvo v uslovijah globalizacii. 107-109 (2017).
2. Garrett, D: “Veb-dizajn. Jelementy opyta vzaimodejstvija”. Simvol-pljus. Rus-
sia Saint Petersburg (2018).
3. Richard Williams: “The Animator’s survival kit”. Faber & Faber, London, UK
(2015).
4. Top JavaScript libraries for animations, https://www.sitepoint.com/our-top-9-
animation-libraries/, last accessed 2019/10/19
5. Top JavaScript libraries for animations, https://hackernoon.com/10-javascript-
animation-libraries-to-follow-ee193196776, last accessed 2019/10/19
6. Github search for animation libraries, https://github.com/search?l=JavaScript
&o=desc&q=animation&s=stars&type=Repositories, last accessed 2019/10/19
7. TIOBE index of programming languages https://www.tiobe.com/tiobe-index/,
last accessed 2019/10/19
8. A small place to discover languages at github, https://githut.info/, last accessed
2019/10/19
9. JavaScript animation engine https://animejs.com/, last accessed 2019/10/19
10. Lightweight JavaScript animation library with a simple, yet powerful API.
https://github.com/juliangarnier/anime, last accessed 2019/10/19
11. Simple libraries for delightful interfaces, https://popmotion.io/, last accessed
2019/10/19
12. A functional, flexible JavaScript library, https://popmotion.io/pure/, last ac-
cessed 2019/10/19
Title Suppressed Due to Excessive Length 9
13. Professional-grade JavaScript animation for the modern web,
https://greensock.com/gsap/, last accessed 2019/10/19
14. FPS definition, https://techterms.com/definition/fps, last accessed
2019/10/19
15. What is Frame rate and Why is it important to PC gaming,
https://store.hp.com/app/tech-takes/what-is-frame-rate, last accessed
2019/10/19