Problem there is durations. You've got a 0.5s toggle animation; you interrupt halfway through; now it moves at half speed.
Conversation
I see; the fundamental issue is additive animation systems don't respond well to having animations removed and re-started.
2
1
1
That sounds right. The notion of "re targeting" makes more sense to me than "removing and adding"
1
3
if you want to retarget, you don't need to remove the old animation. Add a new one from the old animation's destination.
3
2
React State Stream solves this API-wise by letting new animation be map() of the old one
2
that means every animation has to support the entire possibility space of old animations, though.
1
e.g., usually animation curves are 1-d. What happens if you add a new animation going a different direction?
1
Whoever adds new animations, decides how to merge them: sudden transition, additive, something else. That's the point
1
Check first and second example in live demo: rawgit.com/chenglou/react First disruptive, second additive, Same API
1
Correction: second is not additive, it's simpler. Third one on this page is additive: rawgit.com/gaearon/react-
2
Replying to
move more slowly. Seems the hard part is not allowing arbitrary merging but making it easy to specify good merging.
Replying to
It might be not entirely correct in this example, it just illustrates the point of custom merging.
1
This isn't high level API so I agree simpler abstractions on top that make right merging easy are desirable.