[IDEA] WebAnimations compatibility: observe changes to motor-html element CSS transform, then apply to scene graph?

[trusktr]

We can use MutationObserver (or something else?) to observe changes to a <motor-node> or <motor-scene> element's CSS transform style property, then we can apply those changes to the element's corresponding scene graph Node.

This would make it possible to use the WebAnimations API on motor-html elements to make changes to the scene graph.

A neat side-effect of this would be that WebAnimations could then be used to animate WebGL things simply by animating the transforms on the motor-html elements, once we introduce "mixed mode" (the term coined by Famous back when the project was open source).

Caveats:

• How would we synchronize with Motor's animation loop? Maybe in the doucmentation we just encourage developers to use the WebAnimations API inside of a Motor render task (Motor.addRenderTask()). Changes observed by MutationObserver would be synchronous, and would be applied before Motor API modifications. This would mean that it is possible to animate a rotation with WebAnimations, and animate a position using Motor API. If trying to animate position both with WebAnimations and Motor API, then the result would be silly: what I believe would happen is that the WebAnimation position would apply, then the Motor API position would apply, effectively overriding the WebAnimation changes. I am not sure if/when WebAnimations fire inside of a requeatAnimationFrame. Need to experiment...

[trusktr]

This is no longer a good idea. WebAnimations is simply designed for CSS rendering, and trying to use it for animating anything besides CSS properties is not possible.

(Use Tween.js instead, which I'm maintaining, and is generic for animating any sort of number, which you can then apply to CSS properties, or to something else like WebGL properties )