JS thread stalls when using multiple animations

[tuckerconnelly]

It just stalls for a second. Could do what React Native is doing and offload animations to a WebWorker.

[browniefed]

Web workers cannot access the dom

[tuckerconnelly]

Is it DOM manipulation that's stalling it? Was thinking we could offload all the interpolations and such, and use postMessage to update the value/DOM property.

[browniefed]

Not sure what exact issue you are having. Can you post an example where you are seeing it stall?

[tuckerconnelly]

Uhh yeah, releasing a pretty big UI library in a couple days that depends on animated. I'll put a link here when it's up.

[tuckerconnelly]

Alright, it's up: https://carbon-ui.com

It's not as noticeable on production, and I did some optimizations, but in the menu especially there's some jag

[tuckerconnelly]

We could also cleverly implement useNativeDriver and use css transitions and classnames to provide "native" animations.

[browniefed]

That would honestly probably be more complicated and brittle. I haven't done any profiling on this but the animated lib uses rAF and direct manipulation of the DOM so I'm not totally certain about where the slowness is coming from.

[browniefed]

For the record this is a total beta library, never anticipated it being deployed in a production library.

[lelandrichardson]

@tuckerconnelly can you put up a minimal example that creates some slowness? perhaps a codepen? How many simultaneous animations are we talking about here?