How to Create Tweens in Svelte

If you want to animate the properties of an element over a fixed period of time in Svelte, you can use a tweened store:

<script>
    import { tweened } from 'svelte/motion';
    import { cubicOut } from 'svelte/easing';

    const tweenConfig = {
        duration: 1000,
        easing: cubicOut
    };
	
    const rotate = tweened(0, tweenConfig);
    const radius = tweened(0, tweenConfig);

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

• delay: The amount of time to delay the tween. It defaults to 0.
• duration: The duration of the tween. By default, it is set to 400 milliseconds.
• easing: An easing function. You can import predefined easing functions from svelte/easing.
• interpolate: An interpolate function, which allows you to tween between any value. For example, you can use D3.js interpolate package to tween between colors.

For the full list of available easing functions, you can refer to the official svelte docs. Svelte also provides an ease visualizer where you can play with different easings.

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:

• Tweens in Svelte