Experiments >

Pausable tweened store

Experiment #3510th March, 2021by Joshua Nussbaum

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

// pause the tween

// continue from the last pause
// it recomputes time remaining

// reset back to original value

// replay from the beginning

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:


Here’s what it looks like:

view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow