Investigate popmotion or anime.js for web tweens about material-motion-js HOT 3 CLOSED

Just looked at the main players I could find. Looks like TweenLite, anime, and popmotion all build the transform function for you. (mo.js and velocity give you an interpolated value and make you do it.) TweenLite has a non-free license, leaving anime and popmotion worthy of further investigation.

To comply with the Starmap and the notion of composability, I want to ensure that multiple plans affecting the same property can compound (e.g. a move, then a scale, then a move should do the right thing). At first blush, it looks like anime and popmotion map from dictionaries to the transform function, so I'm not sure if reordering transform functions or multiple calls to the same transform function are supported. I also haven't looked in to what access they give you to the interpolated values during an animation.

The whole reason this is hard in the first place is because there's no guarantee a new plan won't arrive while an animation is happening, which means the Performer needs to know how to integrate the new plan into its partially completed performance. This is already something I'll be solving with a manual performance for #36. It's possible (perhaps likely) that I'll just use that JS solution for both React and DOM elements. Unless this sort of ad hoc dynamicism is totally in the wheelhouse of anime or popmotion, delegating is probably just too complex to do right.

from material-motion-js.

If you try to set transform during a Web Animation, your change won't take effect until the animation completes (unless we kept track of in-flight animations in TweenPerformerWeb and manually cancelled/replaced them).

One more reason to move to a manual performing model, where the values are known and controlled by JavaScript

from material-motion-js.

Obsolete.

from material-motion-js.