How to measure react-motion performance?

[jasan-s]

This might be a naive question, but I usually measure my css animations in chrome devtools. However , I am hoping to integrate react-motion in my project and just wanted to see how to measure animations performance(i.e fps)

[nkbt]

You can use https://github.com/mrdoob/stats.js/ and wrap https://github.com/chenglou/react-motion/blob/e48fdad6d82fda32f2d4e5b3d2f295e82f6c580b/src/Motion.js#L92-L199 with it.

Also what could be a bit easier (without code rewrite), use proxyquire when require react-motion/lib/Motion. Something like:

const Motion = proxyquire('react-motion/lib/Motion')({
  raf: callback => requestAnimationFrame(time => {
    stats.start();
    callback(time);
    stats.end();
  });
});

PS: I did not try that yet for react-motion. Code purely out of my head here