September 16, 2022

A Simple Guide for Svelte Transitions

Justin Golden

TL;DR: All default Svelte transitions

import { fade, blur, fly, slide, scale, draw, crossfade } from 'svelte/transition';

Basics

Import the transition you’d like from above, then simpy add transition:scale or transition:fade etc. to apply it. Note that these transitions will run automatically when items are rerendered / recalcualted inside of an #each loop.

Delay, Duration, & Easing

We can also control the delay, duration, and easing of our transitions.

We can use a custom easing function, or simply import a default from svelte/easing:

import { quintOut } from "svelte/easing";

Then, just add the details to your transition in double curly braces:

transition:scale={{ delay: 250, duration: 300, easing: quintOut }}

In & Out (not the burgers)

To specify different transitions for elements entering and leaving, you can replace transition: with in: and out: for different transitions. For example:

in:scale out:fade

Closing

Remember not to over use transitions and aniamtions and only change things in response to user input : )

You can also customize your transitions even more, and work with animations as well. Check the links below to continue learning:

See the Svelte transitions tutorial for more.

Here are the Svelte transition docs as well as the Svelte animation docs for good measure : )