AnimeJs vs GreenSock performance

[hadongtung]

Hi AnimeJS! I'm so like this animation framework, Lite, power and easy to use. :D I tryed performance test beetween javascript animation frameworks. At link: https://greensock.com/js/speed.html

The result is GreenSock performance better than AnimeJS I hate GreenSock T_T. It's so larger and some plugin is commercial. So, I hope, AnimeJS can be improved for faster. How can i have some TIPs-TRICKs for improve it now. Pls ❤️ ❤️ ❤️

Thank you so much!!

[TomS-]

According to that test GSAP, is faster than CSS animation and the new Web Animation API, since GSAP much like AnimeJS just manipulates CSS properties. I find it hard to believe that GSAP is faster than WAAPI and CSS Animation.

[chief10]

@TomS- I felt the same way, but here you can test the difference.

Up the amount of "dots" to the max, first try GSAP and then try Anime. You will see that there is hardly a comparison. GSAP easily out performs Anime.

[vlucendo]

I really like the api and small size of anime, but it's hard to switch from GSAP because of the better performance.

[TomS-]

@chief10 I don't know for sure, but this could be the use of hardware acceleration. Using something like transformZ(0) will vastly improve performance. Especially when there is many elements.

It could be that GSAP is forcing hardware acceleration, however hasn't set a 3d transform on other libraries showing such a difference.

I just find it hard to believe that GSAP is faster than WAAPI. Faster than animejs is perfectly plausible, however, use animejs unless you are wanting to animate 3000 dots on a page.

[juliangarnier]

@hadongtung Glad you like the library! Be sure that I'm always looking for ways to improve the performance. Also GSAP is a great library, and if you find some of their features useful you should pay for them.

@chief10 this test use anime 1.0.0, and the performances have been drastically improved since then.

[MakiBM]

I forked the test and updated the Anime to the most recent ver however it doesn't seem to improve the performance while stressed much. I also applied translateZ hack to force 3d but neither this helped.

https://codepen.io/MakiBM/pen/WMXGVK

Seems like a great library that can behave well under reasonable amount of processed nodes. GASP is definietely far more advanced and leader in the field when it comes to performance. Anime wins in kb weight on the other hand... They simply suit projects at different scale / complexity level

[StefansArya]

Actually the version 2.2.0 is more faster. When experimenting with many stuff, as far I got these that will impact the performance:

• Having too much function call could be slower.
• Indexing object is faster rather than array (on Javascript).
• Using regex is somewhat faster (on Javascript), but it's not supposed for simple purpose like finding string.
• ES6 somewhat slower rather than ES5, and when using transpiler sometime would give addional function/polyfill.
• Animating with transform is recommended rather than animating with top, left.

Below can also be possible

• Creating new object would allocate new memory and will be deleted on the next Garbage Collection.
• Too many garbage collection would slower the whole process.

When benchmarking this library I noticed greensock script also executed. So, make sure to remove other library before benchmarking. Because sometime other library could modify native function.

Obtained data from my benchmark:

Anime.js Raster thread 1 (23ms + 3ms) + GPU 40ms Total = 66ms

TweenMax Raster thread 1 (multiple <1ms) + Raster thread 2 (multiple <1ms) GPU 63ms (this is running while rastering) Total = 63ms

There are possible high memory heap on https://github.com/juliangarnier/anime/blob/69131dc2a9fee58de6a9a986015a78341a15deca/anime.js#L683-L693

Maybe when calling activeInstances[i].tick()

[MuhamadSelim]

Can we call it sheeting