A question from a newbie

[NguyenfromVN]

Hi Anime team,

I am a new person here, I heard about this library when I saw a random Youtube video's title yesterday. I come to the official website and the demo looks interesting. I am considering using this library for my personal portfolio website as currently I am trying to find a way to optimize my animation. My website has some animation and it sometimes feels laggy, especially the grid system with a bunch of cells (when a cell gets touched, it will create a wave from that cell and the wave will travel to the rest of the cells in that grid). Currently, after reducing the number of cells in the grid system and even trying to use will-change for the background-color property, things don't look so smooth though, especially on mobile devices.

So my question is: besides the API you guys write in order to create animation in an easy way, are there any secret sauces (some kind of low-level optimizations) to the library for performance optimization? I think using this library will definitely help to create animation easily but I also need some good optimization too, and if you guys do have some "secret sauces" in it, I am very happy to learn more about this library.

Thank you and look forward to your reply 😁

I also attached a short video about my personal website for your reference (in person, it will feel a bit smoother because of the screen recorder).

[rilysh]

There are several optimizations this library can do, for example, instead of using a custom flattenArray function animejs can use a built-in flat function for array prototypes, see here. However, these functions are mainly for backporting support browsers, especially IE.

Besides this, the library is right now kind of in an unmaintained state. Algorithms that are used here many of them are optimizable. In your case, you can lower down animations for better performance, especially on mobile devices as mobile devices have lower-grade processors compared to desktop/laptop processors. So it's expected to performance degrade in phones.

Oh, also about low-level optimizations...that's not possible with JS but you can use WebAssembly for that.

[NguyenfromVN]

I see, thank you 👏

[different55]

I wouldn't say it's unmaintained, it's in a state of transition. Check out the activity of the entire repo, not just the main branch, and you'll see the main dev's been very hard at work.

[NguyenfromVN]

@different55 @rilysh I just spent some time reading your code, lib/anime.js, and what I see:

• you guys control the animation by using requestAnimationFrame (manually draw each frame by using JS)
• the flow is: play function (line 867) runs -> requestAnimationFrame runs -> step function (line 872) runs -> a new frame will be created by calling tick function (line 881) -> setInstanceProgress will be called (line 1133) -> inside setInstanceProgress, a bunch of logic happens (beginning, looping, ending, etc) and in case a new frame is needed, setAnimationsProgress will be called (line 1064) -> setAnimationsProgress basically updates all the needed animations for the next frame by using setProgressValue -> setProgressValue will update the things that actual change the styling, including CSS, attribute, object, and transform (line 767)
• basically, anime works in a way that we have control over every single frame, we manually control the styling using JS

not sure if what I mentioned here is correct, please fix me if there is any misunderstanding. I am trying to understand how you guys can create complex animation that can run well and smoothly, and as I see, taking control and creating every single frame is the key point here (I use CSS and let CSS control the animation by using transition, it works pretty well until there are a lot of elements that need to be updated at the same time, it seems like CSS alone is not good enough to create a smooth animation and requestAnimationFrame, controlling animation using JS to create every single frame, maybe a good solution for me)

[yellow1912]

I think in most cases if you can do it with CSS then you should.

https://web.dev/css-vs-javascript/

https://web.dev/animations-overview/

https://developer.mozilla.org/en-US/docs/Web/Performance/Animation_performance_and_frame_rate

[NguyenfromVN]

after careful testing, my final solution is to use setInterval to manually control the fps, and it works great though. I "lock" the fps at 20, so if the browser is willing to offer more resources to achieve a higher fps, it will never can to that, and thus other parts of the site can spend those resources freely and lag is no longer a thing on my site, on both PC and mobiles devices 😋 20fps fits my need when it is the sweet point between UX and the machine's resources (24fps can also run well, but the difference in smoothness is super small, and by reducing 4fps, the other parts of the site can run even smoother)

so my conclusion:

• try CSS animation first
• if you need more control, use JS animation (requestAnimationFrame)
• if you want more performance, try to limit your fps by using setInterval (requestAnimationFrame can also work as we have t param to know about the timing, thus we can limit the fps)

anyway, thanks a lot for the support 👌