DOM manipulation in React apps such as

div.style.bottom = '20px;'

is a bitch to optimize.
Anyone got any tips?

Utilising classes?

@fullslack You mean CSS? Nope, it's an animation; not a static rule. We're doing this kind of statements in a loop.

I think that it wasn't really meant to do any heavy animating. I would look at HTML5 canvas.

or offload into an actual animation library, anime is 14 kb minified...

Check out anime.js

Classes with car keyframes may be an answer. Js based animations are typically very expensive as they touch the dom which causes repaints and potential reflows.

@ftyross Tried keyframes, was more expensive and juddery.

Toggle css class with transition?

@devTea Transitions are already used but they're kinda 'mated' with the JS code; just the JS makes it jumpy; just the CSS doesn't produce the same effect. It's not exactly clear what it's doing, but it seems to need both parts of it.

Code all the animation with css and kust toggle it with js, it’s cleaner that way