├── .gitignore
├── package.json
├── yarn.lock
├── README.md
└── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-animation-store",
 3 |   "version": "0.0.1",
 4 |   "main": "index.js",
 5 |   "license": "MIT",
 6 |   "peerDependencies": {
 7 |     "svelte": "^3.x"
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 | 
4 | 
5 | svelte@^3.38.1:
6 |   version "3.38.1"
7 |   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.1.tgz#5d856a9d643f56a8d3e281f6dd8b4f8962155ca5"
8 |   integrity sha512-N3XLAyfzqrFxwRLevBeW7Dke9ZlHRVGSIed5abo4Drvj+zvd2OyWpFa1x4nQUc8Lnvt4Kcn8/5le1peRDybNqg==
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Svelte Animation Store
 2 | ---------------
 3 | 
 4 | A store that is based on Svelte's [tweened store](https://svelte.dev/docs#tweened), with some additional functionality:
 5 | 
 6 | - `pause()`: freeze the store at the current value.
 7 | - `reset()`: resets the store's value back to the last set point.
 8 | - `continue()`: play on from a paused state.
 9 | - `reverse()`: play in reverse.
10 | - `replay()`: go back to start, and play to last set point.
11 | - `accelerate(speed)`: adjust the speed of the animation.
12 | 
13 | Functionality inherited from `writable()`:
14 | 
15 | - `set(value)`: works the same as a `writable` store.
16 | - `update(callback)`: works the same as a `writable` store.
17 | - `subscribe(callback)`: works the same as a `writable` store.
18 | 
19 | ## [Demo](https://svelte.dev/repl/9751df15d22245f691a1cf3a30c3b7b4?version=3.35.0)
20 | 
21 | ## License
22 | 
23 | MIT
24 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import { tweened } from 'svelte/motion'
 2 | import { get } from 'svelte/store'
 3 | 
 4 | export function animation(initial, options={}) {
 5 |   const speed = options.speed || 1
 6 |   const duration = options.duration || 300
 7 |   const adjustedOptions = {...options, duration: duration / speed, speed}
 8 |   const store = tweened(initial, adjustedOptions)
 9 |   const set = store.set
10 | 
11 |   store.lastSet = initial
12 |   store.lastSpeed = speed
13 | 
14 |   store.pause = () => {
15 |     const value = get(store)
16 |     return set(value, {duration: 0})
17 |   }
18 | 
19 |   store.reset = () => {
20 |     return set(initial, {duration: 0})
21 |   }
22 | 
23 |   store.continue = () => {
24 |     const value = get(store)
25 |     const percentageCompleted = (store.lastSet - initial) == 0 ? 1 : (value - initial) / (store.lastSet - initial)
26 |     const remaining = (options.duration - (options.duration * percentageCompleted))
27 | 
28 |     return set(store.lastSet, {duration: remaining / adjustedOptions.speed})
29 |   }
30 | 
31 |   store.replay = async () => {
32 |     await store.reset()
33 |     return set(store.lastSet, adjustedOptions)
34 |   }
35 | 
36 |   store.reverse = async () => {
37 |     const value = get(store)
38 |     const percentageCompleted = (store.lastSet - initial) == 0 ? 1 : (value - initial) / (store.lastSet - initial)
39 |     const completed = options.duration * percentageCompleted / store.lastSpeed
40 | 
41 |     set(value, {duration: 0})
42 | 
43 |     return set(initial, {duration: completed})
44 |   }
45 | 
46 |   store.set = (newValue, options) => {
47 |     store.lastSet = newValue
48 |     return set(newValue, adjustedOptions)
49 |   }
50 | 
51 |   store.accelerate = (newSpeed) => {
52 |     adjustedOptions.speed = newSpeed
53 |     adjustedOptions.duration = duration / newSpeed
54 | 
55 |     const promise = store.continue()
56 | 
57 |     store.lastSpeed = newSpeed
58 | 
59 |     return promise
60 |   }
61 | 
62 |   return store
63 | }
64 | 


--------------------------------------------------------------------------------