Skip to main content
Advanced Svelte Stores Springs

The spring function is an alternative to tweened that often works better for values that are frequently changing.

In this example we have two stores — one representing the circle’s coordinates, and one representing its size. Let’s convert them to springs:

App
<script>
	import { spring } from 'svelte/motion';

	let coords = spring({ x: 50, y: 50 });
	let size = spring(10);
</script>

Both springs have default stiffness and damping values, which control the spring’s, well... springiness. We can specify our own initial values:

App
let coords = spring({ x: 50, y: 50 }, {
	stiffness: 0.1,
	damping: 0.25
});

Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring’s behaviour. Notice that you can adjust the values while the spring is still in motion.

Edit this page on GitHub

previous next
Tweened values
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script>
	import { writable } from 'svelte/store';
 
	let coords = writable({ x: 50, y: 50 });
	let size = writable(10);
</script>
 
<svg
	onmousemove={(e) => {
		coords.set({ x: e.clientX, y: e.clientY });
	}}
	onmousedown={() => size.set(30)}
	onmouseup={() => size.set(10)}
	role="presentation"
>
	<circle
		cx={$coords.x}
		cy={$coords.y}
		r={$size}
	/>
</svg>
 
<div class="controls">
	<label>
		<h3>stiffness ({coords.stiffness})</h3>
		<input
			bind:value={coords.stiffness}
			type="range"
			min="0.01"
			max="1"
			step="0.01"
		/>
	</label>
 
	<label>
		<h3>damping ({coords.damping})</h3>
		<input
			bind:value={coords.damping}
			type="range"
			min="0.01"
			max="1"
			step="0.01"
		/>
	</label>
</div>
 
<style>
	svg {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
 
	circle {
		fill: #ff3e00;
	}
 
	.controls {
		position: absolute;
		top: 1em;
		right: 1em;
		width: 200px;
		user-select: none;
	}
 
	.controls input {
		width: 100%;
	}
</style>