react-magician icon indicating copy to clipboard operation
react-magician copied to clipboard

Implement Animation.render function

Open SanderSpies opened this issue 10 years ago • 1 comments

For 60fps animations it's wiser to skip React's rendering pipeline, and directly modify the style attribute of elements.

How should it work

render() {
   return Animation.render(this, () => {
      // standard React stuff
   });
}

Animation.render calls the given function when:

  • first time
  • props / state changed

Animation.render won't call the function and directly modify the DOM element style prop when:

  • second time
  • props / state not changed

Need to solve:

  • how to connect animating elements with React Magician?

SanderSpies avatar Apr 19 '15 17:04 SanderSpies

Something like this could help for animations:

ref={Animation.animateWith('fooAnimation', 'barBlock')}

Although the idea looks good, not sure about the syntax though.

SanderSpies avatar Apr 20 '15 06:04 SanderSpies