Introduction to do transitions with Svelte

Normally when building websites and web applications you have to do animations using CSS or using JavaScript. Some libraries also support this and therefore make it easier for you to create transitions and animations.

In this tutorial, we will be looking at the Svelte transitions and how you can start using the built-in transitions and animations in your project.

How to use the built-in transitions in Svelte

Using the built-in transitions in Svelte is easier than you might think. If you take a moment to think about how it is done using CSS and that you need to add and remove classes to create transitions or animations. Throw all those thoughts away, cause from now on you will be doing it in a much easier way, and here is how to do it!

To begin with, we import the “fade” effect from Svelte, as we have done in the example below.

<script lang=“ts”>
   import { fade } from 'svelte/transition';
   let visible: boolean = true;
</script>

Now that we have the effect imported to our project we can start applying it to the elements that we want to fade in and out. Below is a simple example of how you apply the fade transition to an element.

<p transition:fade>Fades in and out</p>

How to add parameters to your Svelte transitions

Sometimes you want to do something with your transitions that weren't originally set up by Svelte and you can do that with parameters. Parameters allow you to add instructions to how you want your transitions or animations to work. This comes in handy when you are dealing with transitions or animations that either fly to the left or right.

In the following example, you will see an example where we use the built-in "fly" transition from Svelte. Instead of letting this example follow the standard settings, we will instruct which way to go and also for how long the transition should last:

<script lang="ts">
   import { fly } from 'svelte/transition';
</script>

<p transition:fly="{{ y: 200, duration: 2000 }}">Flies in and out</p>

How to use different transitions when fading in and out

When dealing with transitions in Svelte you can either let Svelte add a transition that will fire both when showing the element and when hiding it, but you can also choose to only fire an event when the element is appearing or when it is disappearing. This is called "in" and "out".

Below you will see an example where we added two different transitions for when the element is appearing and when it is disappearing. We can easily control these by using the attributes: "in" and "out".

First, we start by importing the animations that we would like to use. You can copy the example below to quickly get a working example:

import { fade, fly } from 'svelte/transition';

<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>Flies in, fades out</p>

How to create custom CSS transitions in Svelte

Another useful way to use transitions in Svelte is to create them yourself using CSS. This method is more like the original one but instead of using classes, we will manipulate the CSS.

In the following example, we will create our own custom CSS fade transition to use instead of importing the already built-in fade transition from Svelte.

<script>
   let visible = true;

   function spin(node, { duration }) {
      return {
          duration,
          css: t => ``
      };
   }

   function fade(node, {
      delay = 0,
      duration = 400
   }) {
   const o = +getComputedStyle(node).opacity;
   return {
      delay,
      duration,
      css: t => `opacity: ${t * o}`
   };
   }
</script>

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

{#if visible}
   <div class="centered" out:fade>
      <span>transitions!</span>
   </div>
{/if}

<style>
   .centered {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
   }

   span {
      position: absolute;
      transform: translate(-50%,-50%);
      font-size: 4em;
   }
</style>

Wrapping up

Now we have been talking a bit about how you easily can use the built-in transitions that already comes with Svelte, how you can add your own instructions through parameters, and how you can build your own custom CSS transitions. We hope you have gained some knowledge and now know how to add these awesome transitions to your own project.

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.