How to Create Animations in Svelte

How to Create Animations in Svelte

Ferenc Almasi β€’ 2020 September 25 β€’ Read time 1 min read
  • twitter
  • facebook

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

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

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.
How to Create Transitions in Svelte
If you would like to see more Webtips, follow @flowforfrank

Looking into Svelte 3

Resources:

  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.