How to Create Animations in Svelte

You can easily create custom animations in Svelte by using the animate:fn directive:

<!-- To create custom list animations, use the animate:fn directive -->

<script>
    const disappear = () => {
        return {
            duration: 300,
	    css: (t, u) => `transform: scale(${u})`
	};
    };
</script>

{#each cubes as cube, index (cube)}
    <div class="cube" animate:disappear></div>
{/each}

Note that:

• Animations directives must be inside an #each block.
• Animations are triggered when the elements inside the block gets reordered.

You may also see that we have two parameters for the css function. These are:

• t: goes from 0 to 1 with the easing
• u: equals to 1 - t.

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:

• The animate directive in Svelte