This is really cool. I'd love to see some sort of visual front end where you can set up your timeline and change position, tweening, and the like. I wonder how practical an exporter for After Effects would be? If this is made more accessible for artists, that would be awesome.
It's interesting, declarative APIs are amazing for a demo... A single function call can make literally anything possible. But when you eventually want to do something interactive, a declarative API can't work, and you need to learn a separate imperative API anyway... At which point what was the point of the declarative one in the first place?
React generally requires more than just a wrapper, since its virtual DOM is populated in a highly controlled manner that libraries need to follow. But you can try.
Actually it's pretty trivial. You can always just have your render function be just a static div, set a ref to the div, and do setup in componentDidMount and updates in componentWillUpdate. Since the render function will always return a trivially identical subtree, it will never change that DOM node. Of course, if your component moves in the HTML hierarchy, your animation may restart, but that's unlikely in most use cases.
Shopify uses animated svgs in the admin panel ui, they even wrote a nice blog post about it.
>A lot of the feedback we’ve gotten from front-end developers has been along the lines of “that’s cool! Did you use images or CSS for [that effect]?” In most cases, the answer was actually neither, because most of the fun graphics, animations, and effects rely heavily on SVG with a bit of JavaScript and some clever Rails helpers.