Performance issue during Tween Animation

[0xDragonLong]

I found that in some cases, if I place lots of dom element in my page. Animation via tweenState can lead to performance problem. There are no obvious latency in page interaction, but it's hard to reach 50fps in iPhone4S or even iPhone5.

I suppose that every time when you execute setState in React, it will trigger the Diff process to create new ReactElement instance. If you have complex dom structure you need to generate big amount of ReactElements per frame!

I think it might cost a lot to achieve animation via setState per frame. I purpose than it is better to get the ref of the animation target ReactElement, and operate dom style directly. I know that it is not a matter of React Diff by doing so. Despite I still consider this can be the best method to achieve high performance Animation in React. I also achieve anims in my React webapp by using operate Domstyle directly.

Thank you

[Cheng Lou]

You're right. The upcoming web port of React.Animated will do just that. Tween-state will stay this way because it's already an established library, and people might count on the re-render to do some other stuff. React-motion currently also uses render, but I might look into CSS keyframe generation and DOM manipulation as you suggested, soon.

I'm closing this issue, but feel free to recreate it on react-motion! Thanks =)