Animations and Transitions

One way to make your user interfaces more appealing is by adding transitions and animations. Svelte makes working with Animations and transitions extremely convenient. They come built-in with Svelte, so you don’t need to download extra packages. This means we can add beautiful interactions to applications without sacrificing performance.

Let’s start with transitions. The svelte/transition module exports seven functions:

1. fade
2. blur
3. fly
4. slide
5. scale
6. draw
7. crossfade

Each can be used to apply different transitions to DOM elements.

For example, right now when we open our shopping cart it just appears. Wouldn’t it look nicer if it faded in and out when we open and close it instead? We can do this using the fade function, which we can import from svelte/transition. Now, by adding transition:fade as a property of our outermost div in our shopping cart component, we will get a nice fade in and out transition.

<script>
  import { fade } from 'svelte/transition';
</script>
 
<div transition:fade>
  <ShoppingCart />
</div>

If you test this out in the browser, you’ll see that when you click the cart button, the shopping cart fades in when it opens, and out when it closes. In this example, we are using the transition directive which will transition both in and out, but we can also use the in or out directives. For example, if we only want this transition to fade in, we can replace transition with in. Now, the cart only fades in and no longer fades out.

<script>
  import { fade } from 'svelte/transition';
</script>
 
<div in:fade>
  <ShoppingCart />
</div>

We can also pass parameters into this transition to specify the delay, duration, and easing. For example, if we want this transition last for 2000ms we can pass an object in as a parameter with the key duration and the value we wish to set it to. If we also wanted it to be delayed by 2000ms, we would pass in another parameter like this.

<script>
  import { fade } from 'svelte/transition';
</script>
 
<div in:fade="{{delay: 2000, duration: 2000}}">
  <code />
</div>

If we were to test this out in the browser, we would notice first the delay, and then the longer duration. Different transitions can accept different parameters. To know which params are available for each transition you should check out the svelte documentation under the ‘svelte/transition’ tab. This is where you can find a list of all the transitions, as well as the params they accept.

Similar to Svelte transitions, svelte also provides a built-in animate directive to apply motion to the elements in the code.

I've added a new function shuffle, which will move the most recently edited item to the top of our list. For instance, if we change the quantity of one of our items in our shopping cart, it would move to the top. Let's use Svelte’s built in animations to animate this movement. To use the animate directive, we first need to import the flip function from svelte-animations. Flip stands for first, last, invert, play. The flip function calculates the start and end position of an element and animates between them, translating the X and Y values. It accepts three parameters, delay, duration, and easing, which we're already familiar with from transitions. Now that we are importing flip from svelte-animate, we can add the animate directive to our div within the each block like this. Now, any time the quantity of an item changes, it will animate to the top of the list. This is such as smooth animation, and it was so fun to create.

<script>
  import { flip } from 'svelte/animate';
  function addOne(i) {
    shuffle(i);
    cartItems[i].quantity = cartItems[i].quantity + 1;
  }
  function removeOne(i) {
    shuffle(i);
    cartItems[i].quantity = cartItems[i].quantity - 1;
  }
  const shuffle = (i) => {
    var element = cartItems[i];
    cartItems.splice(i, 1);
    cartItems.splice(0, 0, element);
  };
</script>
{#each cartItems as item, i (item.name)}
<div animate:flip>...</div>
{/each}

Svelte makes adding animations and transitions to your code smooth and elevates your app to the next level, making it a convenient feature to have at your disposal. In the next module, we'll go over routing with SvelteKit.