Spring

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:

<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:

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.