SanderSpies / react-magician

Declaratively animate React components
http://sanderspies.github.io/react-magician/examples/simple/index.html
166 stars 2 forks source link

Implement Animation.render function #10

Open SanderSpies opened 9 years ago

SanderSpies commented 9 years ago

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:

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

Need to solve:

SanderSpies commented 9 years ago

Something like this could help for animations:

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

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