3
cst1992
13d

DOM manipulation in React apps such as

div.style.bottom = '20px;'

is a bitch to optimize.
Anyone got any tips?

Comments
  • 1
    Utilising classes?
  • 1
    @fullslack You mean CSS? Nope, it's an animation; not a static rule. We're doing this kind of statements in a loop.
  • 1
    I think that it wasn't really meant to do any heavy animating. I would look at HTML5 canvas.
  • 2
    or offload into an actual animation library, anime is 14 kb minified...
  • 2
    Check out anime.js
  • 2
    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.
  • 1
    @ftyross Tried keyframes, was more expensive and juddery.
  • 1
    Toggle css class with transition?
  • 1
    @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.
  • 1
    Code all the animation with css and kust toggle it with js, it’s cleaner that way
Your Job Suck?
Get a Better Job
Add Comment