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>
Spring.svelte
Copied to clipboard!

You can use the following options in a spring store:

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.

How to Animate Elements in Svelte By Stiffness and Damping
If you would like to see more Webtips, follow @flowforfrank

Looking into SvelteΒ 3

Resources:

Remove ads
Remove ads

πŸ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. β˜•

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
πŸŽ‰ Thank you for subscribing to our newsletter. x