How to Animate Elements in Svelte By Stiffness and Damping

In Svelte, you can use a spring store to animate certain properties of an element gradually, based on a stiffness and damping parameter:

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

    const springConfig = {
        stiffness: 0.25,
	damping: 0.1
    };
	
    const rotate = spring(0, springConfig);
    const radius = spring(0, springConfig);

    const transform = () => {
        $rotate = 720;
	$radius = 100;
    };
</script>

<div on:click={transform}
     style="transform: rotate({$rotate}deg); border-radius: {$radius}%">
</div>

You can use the following options in a spring store:

• stiffness: A value between 0 and 1, where the higher you go, the tighter the spring gets.
• damping: A value between 0 and 1, where the lower you go, the springier the spring gets.
• precision: A threshold at which the spring is considered to be at rest. The lower you go, the more precise it will be.

You can find full examples of spring, on the official docs of Svelte, where you can also play around with different values of stiffness and damping.

Looking into Svelte 3Quickstart by creating a retro board in Svelte from scratchSvelte 3 promises a radical new approach to building user interfaces. Since it is a compiler, it works fundamentally different from other big frameworks...Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• Spring store in Svelte