Code animation: Derived tween

What happens when there is a set of animation that need to act in concert?

One approach is create a new type of derived store that can pause, continue, reset, etc..

This is based off the animation store experiment.

The idea would work like this:

const storeA = animation(...)
const storeB = animation(...)
const derived = derivedAnimation([storeA, storeB])

derived.pause()

Code

https://svelte.dev/repl/62b6423572634f48848d559c462750d5?version=3.38.2

Demo

Notes

• The problem with this approach is you still need to trigger each underlying animation on it’s own with .set() or .update(). Maybe animation stores shouldn’t allow arbitrary value settings.