Animation in Svelte (Easing)

Animations are not the core functionality of an application. However, they enhance the user experience and make our application more engaging and pleasing to the eyes.

Unlike other frameworks, Svelte has a built-in feature for animation. The animations in Svelte are CSS-based. Henceforth it improves the performance. In this article, we learn about Svelte animation.

In this we'll add a route animations/easing. If you are new here, before proceeding further you need to visit this link.

In svelte there is a library easing library under the svelte. We need to import it like import { sineOut } from "svelte/easing". And following functions supported

bounceIn, bounceOut, bounceInOut, backInOut, backIn, backOut,    circInOut, circIn, circOut, cubicInOut, cubicIn, cubicOut,    elasticInOut, elasticIn, elasticOut, expoInOut, expoIn, expoOut,  quadInOut, quadIn, quadOut, quartInOut, quartIn, quartOut, quintInOut, quintIn, quintOut, sineInOut, sineIn, sineOut

Create a new folder animation under the pages folder. And a file easing.svelte and the following code

<script>
    import { flip } from 'svelte/animate'
    import {sineOut, bounceIn, bounceOut, bounceInOut} from "svelte/easing";

    let [ bounceIn_dates, bounceOut_dates, bounceInOut_dates, sineOut_dates ] = Array(4).fill(true);

    let dates = ['08-01-2021', '09-01-2021', '10-01-2021', '11-01-2021', '12-01-2021', '13-01-2021'];

    function removeItem(number) {
        dates = dates.filter(n => n !== number);
    }


</script>
<br />

<div class="border">
    <div style="margin-left: 20px;">
        <h1>Flip BounceOut Function</h1>

        <label>
            Dates
            <input type="checkbox" bind:checked={bounceOut_dates}>
        </label>

        {#each dates as d (d)}
            <div animate:flip={{ duration: 600, easing: bounceOut }} class="container" class:bounceOut_dates>
                <button on:click={() => removeItem(d)}>{d}</button>
            </div>
        {/each}
    </div>

</div>


<style>

    .container {
        width: fit-content;
        font-family: Helvetica;
    }

    .bounceIn_dates, .bounceOut_dates, .bounceInOut_dates, .sineOut_dates {
        display: inline-block;
        margin-left: 10px;
    }

    .border {
        border-style: solid;
        box-shadow: #cccccc;
        width: 50%;
        border-color: coral;
        border-width: thin;
    }
</style>

You can see the following content on the page when you visit "http://localhost:5000/animations/easing"

Similarly we can add the animation on sineOut, bounceIn, bounceInOut

<script>
    import { flip } from 'svelte/animate'
    import {sineOut, bounceIn, bounceOut, bounceInOut} from "svelte/easing";

    let [ bounceIn_dates, bounceOut_dates, bounceInOut_dates, sineOut_dates ] = Array(4).fill(true);

    let dates = ['08-01-2021', '09-01-2021', '10-01-2021', '11-01-2021', '12-01-2021', '13-01-2021'];

    function removeItem(number) {
        dates = dates.filter(n => n !== number);
    }

    const options = { duration: 600, easing: sineOut };

</script>
<br />

<div class="border">
    <div style="margin-left: 20px;">
        <h1>Flip BounceOut Function</h1>

        <label>
            Dates
            <input type="checkbox" bind:checked={bounceOut_dates}>
        </label>

        {#each dates as d (d)}
            <div animate:flip={{ duration: 600, easing: bounceOut }} class="container" class:bounceOut_dates>
                <button on:click={() => removeItem(d)}>{d}</button>
            </div>
        {/each}
    </div>

</div>

<div class="border" style="margin-top: 5px;">
    <div style="margin-left: 20px;">
        <h1>Flip BounceInOut Function</h1>

        <label>
            Dates
            <input type="checkbox" bind:checked={bounceInOut_dates}>
        </label>

        {#each dates as d (d)}
            <div animate:flip={{ duration: 600, easing: bounceInOut }} class="container" class:bounceInOut_dates>
                <button on:click={() => removeItem(d)}>{d}</button>
            </div>
        {/each}
    </div>

</div>

<div class="border" style="margin-top: 5px;">
    <div style="margin-left: 20px;">
        <h1>Flip SineOut Function</h1>

        <label>
            Dates
            <input type="checkbox" bind:checked={sineOut_dates}>
        </label>

        {#each dates as d (d)}
            <div animate:flip={options} class="container" class:sineOut_dates>
                <button on:click={() => removeItem(d)}>{d}</button>
            </div>
        {/each}
    </div>

</div>



<div class="border" style="margin-top: 5px;">
    <div style="margin-left: 20px;">
        <h1>Flip BounceIn Function</h1>

        <label>
            Dates
            <input type="checkbox" bind:checked={bounceIn_dates}>
        </label>

        {#each dates as d (d)}
            <div animate:flip={{ duration: 600, easing: bounceIn }} class="container" class:bounceIn_dates>
                <button on:click={() => removeItem(d)}>{d}</button>
            </div>
        {/each}
    </div>

</div>




<style>

    .container {
        width: fit-content;
        font-family: Helvetica;
    }

    .bounceIn_dates, .bounceOut_dates, .bounceInOut_dates, .sineOut_dates {
        display: inline-block;
        margin-left: 10px;
    }

    .border {
        border-style: solid;
        box-shadow: #cccccc;
        width: 50%;
        border-color: coral;
        border-width: thin;
    }
</style>

See you in the next article