DEV Community

Cover image for How to animate state change in Svelte
Abdulmumin yaqeen
Abdulmumin yaqeen

Posted on • Originally published at yaqeen.me

5 2 2

How to animate state change in Svelte

Svelte is amazing, and in this article we will go through how you can animation/transition between components in svelte.

If you’re to do this with CSS, you will find it almost impossible if what you’re changing is not a CSS property. With the recent development in view-transitions-api, we’re moving to a phase were it going to become easier to do this.

How?

we can achieve this with the {#key …} block, which is part of the super useful list of logic blocks Svelte provides.

view the complete list of logic blocks here

The {#key …} is not built specifically for animating or transition, but it listens to changes in the expression changes and it destroys and recreate it content whenever the expression changes changes.

With this advantage, we can create a transition either using svelte built in transitions capabilities or make a custom one with CSS.

Example

This simple syntax for this is:

{#key value}
    <div transition:fade>{value}</div>
{/key}
Enter fullscreen mode Exit fullscreen mode

Here we are going to wrap our content around the key and we’re going apply a slide transition whenever the image changes.

<script>
    let images = ['/carousel.png', '/carousel1.png', '/carousel2.png', '/carousel3.png'];

    let currentIndex = 0;
    let image = images[currentIndex];

    onMount(() => {
        // Start the carousel
        interval = setInterval(() => {
            currentIndex = (currentIndex + 1) % images.length;
            image = images[image];
        }, 3000);
    });
</script>

<div>
    <div>
        {#key image}
            <div transition:slide>
                <img src={image} alt="" />
            </div>
        {/key}
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

One thing I want to clarify is that, in both examples, no just values can be passed to the key, you can also feed it an expression, and will perform the same.

Svelte is beautiful, I love it, if you’re here, you definitely love it too. Share the knowledge with others that might find it useful.

Peace ✌️

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay