Support for animation libraries

[boardfish]

Referring to your issue in the main project, I've tried to do something similar with react-zdog. Since I'm pretty new to animation libraries in general, I've been using this article – react-transition-group and animejs proved pretty tricky to get my head around, but I thought I'd almost got there with Pose when I came upon this error:

Error: No valid DOM ref found. If you're converting an existing component via posed(Component), you must ensure you're passing the ref to the host DOM node via the React.forwardRef function.

It looks like the components aren't passing refs back up in the right way.

I'm aware there's already a demo for react-spring, which I'll probably end up playing with next, but better support and examples for other libraries would be nice for those coming from anime.js and others.

[drcmda]

Not sure if pose/anime can do this sort of thing. They animate dom elements normally. There's nothing that blocks them, though. These are just react components with props, so changing props fast will give you an animation. If you use something like React-motion for instance, it will work out of the box. Same goes for animated and react-spring. With spring i could make a native target, so that it doesn't have to "render" the animation out, that would be the fastest path.

[drcmda]

To illustrate: https://codesandbox.io/s/summer-dawn-p2fk0

import ReactDOM from 'react-dom'
import React from 'react'
import { Illustration, Shape } from 'react-zdog'
import { Motion, spring } from 'react-motion'

ReactDOM.render(
  <Illustration zoom={8}>
    <Motion defaultStyle={{ stroke: 0 }} style={{ stroke: spring(50) }}>
      {props => <Shape {...props} color="lightblue" />}
    </Motion>
  </Illustration>,
  document.getElementById('root')
)

But i would still recommend react-spring instead.