Introducing the tweened and spring stores

Let us begin our journey into the world of Svelte animations by understanding the concept of tweened and spring stores.

The tweened and spring stores are writable stores that typically hold numeric values. To see the features they offer, let us compare them with a regular numeric variable.

If you are not familiar with writable stores, you can check out Chapter 8, where we extensively explained Svelte stores and creating writable Svelte stores using the built-in writable() function.

Usually, when you have a numeric variable and you update the variable, the value of the variable changes instantly. In the following example, we have a numeric variable, height, whose initial value is 10. When we assign a new value of 20 to the variable, the value of the variable changes to 20 immediately:

let height = 10;
height = 20;

If we use this numeric variable to represent the height of an element or the progress in a progress bar, the height...