A Guide to basic Svelte Transitions – Fade, Fly and Slide

Transitions of the UI elements can make web pages look and feel better for the end users. They help provide an all around better user experience. In this post, we look at some basic Svelte Transitions and how to implement them.

If you are new to Svelte in general, I will recommend you to start with the basics of Svelte.

1 – The Svelte Fade Transitions

The first basic transition is fading an element in our out of the DOM. Svelte provides the transition directive to achieve this behaviour.

See the below example:

<script>
        import { fade } from 'svelte/transition';
	let showElement = true;
</script>

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

{#if showElement}
	<p transition:fade>
		Fading Demo
	</p>
{/if}

Here, we first import the fade function from the svelte/transition module. We can apply this function to the p tag.

Also, we declare a variable showElement to control the behaviour of the check box and trigger the transition using a Svelte if block.

2 – The Svelte Fly Transition

Another commonly used transition is the fly transition. In this, we can give the effect of an element flying into the DOM area.

Check out the below snippet.

<script>
	import { fly } from 'svelte/transition';
	let showElement = true;
</script>

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

{#if showElement}
	<p transition:fly="{{ y: 3000, duration: 3000 }}">
		Fly Demo
	</p>
{/if}

Here, we import the fly function from the svelte/transition module.

Also, while adding the function to the DOM element, we provide additional parameters such as the y co-ordinate and the duration of the effect. These parameter values can be tweaked based on our exact requirement.

Also, do note that this transition effect is reversible. If we toggle the checkbox during the transition, it transitions from the current point rather than from the end or the beginning.

3 – Svelte In and Out Transitions

We can also have separate transitions for an element entering in the DOM and exiting the DOM.

See below example:

<script>
	import { fade, fly } from 'svelte/transition';
	let showElement = true;
</script>

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

{#if showElement}
	<p in:fly="{{ y: 300, duration: 3000 }}" out:fade>
		In and Out Transition Demo
	</p>
{/if}

In this case, we import both fade and fly functions.

Instead of using the transition keyword, we use the in and out keywords. For the in keyword, we use the fly transition. For the out keyword, we use fade.

4 – Svelte Slide Transition

Lastly, we can also use the popular slide transition.

See below example:

<script>
	import { slide } from 'svelte/transition';
	let showElement = true;
</script>

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

{#if showElement}
	<p transition:slide>
		Slide Demo
	</p>
{/if}

In this case, we import the slide function and use it on the element in the DOM.

Conclusion

Transitions in Svelte are a great way to make your application feel more responsive.

Want to learn additional tricks for Svelte user interface? Check out this post on how to implement tweening in Svelte.

If you have any comments or questions about this post, please feel free to mention them in the comments section below.