Pausable tweened store

Earlier today, I did an experiment where I needed to pause a tweened store.

Figured it could be turned into a reusable store, so I explored how it might work in a REPL.

Using the standard tweened() store, I was able to attach some extra functions, like .pause(), .continue() etc. It’s very similar to how I created my local storage store.

// works just like svelte's `tweened` store
const tween = pausableTweened(initial, {duration, easing})

// set works the same too
tween.set(newValue) 

// pause the tween
tween.pause()

// continue from the last pause
// it recomputes time remaining
tween.continue()

// reset back to original value
tween.reset()

// replay from the beginning
tween.replay()

Note: one caveat is after a pause, it doesn’t honor the last position of easing function. I’ll have to look into why.

Here’s the code:

https://svelte.dev/repl/abce342ed248428ab6d67d4ee64033b9?version=3.35.0

Here’s what it looks like: