A question from a newbie

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).

[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 👌

[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