AnimeJS performance & the main-thread of JS

[mesqueeb]

I have looked everywhere on the website and in issues, but couldn't find a topic on this.

Since there is only the main-thread in JavaScript, the developer needs to optimise it so it won't ever block the UI interactions. Using direct CSS animations completely avoid even worrying about this.

My questions are:

1. Does animeJS use CSS animations under the hood? (in what degree)
2. Is there ever danger of heavy animations with AnimeJS where the main thread could get stuffed for more than say 50ms?

I saw in the source code that animeJS basically modifies the dom elements -- I think -- directly like so:

But I'm not sure how I should reason if animeJS could ever block the UI and in what way. I have to be able to explain this before I can get permission to use AnimeJS 😅

[yellow1912]

Read the code perhaps? It's open source.

[mesqueeb]

@yellow1912 that's what i did. That screenshot i posted is from the source code.

[SiddharthSham]

@mesqueeb To answer your questions,

1. I do not believe Anime uses CSS animations under the hood. If your animations are achievable in CSS, I recommend you do not use an animation library at all.
2. Anime does a lot of optimisation under the hood to keep things snappy. That being said, if you start animating expensive properties (top, left, etc) on a ridiculous number of elements (say, >1000); in that case, depending on the processing power available to the browser, the main thread might be blocked for long enough to cause noticeable jitters.

Anime is useful when you need to create complex animations. However, it is up to you, as a developer to animate responsibly and efficiently.

[navanshu]

If you are talking about the style recalculation that is anyways done when there is style change and is non blocking. Anime js uses animation frame, that is why it can provide such a good api to interact with.