refs on primitives (animation with react-spring)

Is there a way to obtain a ref on objects?

I would like to create a native react-pixi target for react-spring, then you could use it to “natively” animate things outside of react. For instance here’s an example for react-konva:

using hooks: https://codesandbox.io/s/71xj546m46 using render props: https://codesandbox.io/s/4z2vx0l86x

And this was react-blessed: https://twitter.com/0xca0a/status/1000513216672403456

All i need to enable this is a ref and something to update properties. For instance, here’s the kova implementation: https://github.com/drcmda/react-spring/blob/master/src/targets/konva/index.js#L14-L21

Unfortunately ref={r => console.log®} returns currently null, i could still just animate elements with rendering them 60fps with new props, but that is extremely expensive.

[drcmda]

Seems to work, thanks for the help! https://codesandbox.io/embed/0qkll4y5nw 🙂 This is animating 60fps, no React/forceUpdate involved. Would be ready for react hooks as well.

I only needed this for an article explaining on how to write custom targets on the react-spring site. But if you like we could make this into a real target. All it needs is a better understanding on what objects to set.

[michalochman]

#95 shows an example how to implement Animated that will skip React’s forceUpdate.