Js animations in web workers independent of the main thread


#1

I would like to propose to make api for working with css from web workers. Most animations can be implemented using ‘layout-free’ properties that do not require synchronization with the main thread. If there was an opportunity to work with these properties from web workers, then it would be possible to do very flexible js animations without slowing down.

Before me, this topic has already been well disassembled 4 years ago. So I just leave here a link to that stuff: https://github.com/ianvollick/animation-proxy/blob/master/Explainer.md

I will give an example of using this api. Now I’m thinking about how to improve the performance of my plugin, which adds a smooth kinetic scrolling with bounces over the edges, both on mobile devices. It already works and looks amazing, but only if the main thread is clean and all the processes on the site are well optimized. If it was possible to work with the transform property regardless of the main thread, then I could implement my ‘threaded scrolling’ with very beautiful animations, working just as smoothly as on mobile devices.


#2

The CSS Houdini group is already working on this, I think: their Animation Worklets seem to fit what you’re talking about. It’s all still preliminary though, but you should check them out anyway. There’s a Smashing Magazine article by Philip Walton from a year ago that explains some of this. They also have a GitHub repository.