Transitions

Animations in Svelte are first-class so you don’t have to reach for an animation library unless you want to. To use transitions you can import blur, fly, slide, scale, draw and crossfade from svelte/transition.

To use a transition use transition:fade. You can specify parameters such as delay, duration, easing for fade. To learn what they are for each transition consult the documentation.

App.svelteCopy

<script>
	import { fade } from 'svelte/transition'

	let showFade = false

	function toggleFade() {
		showFade = !showFade
	}
</script>

<button on:click={toggleFade}>Wax poetic</button>

{#if showFade}
	<blockquote transition:fade={{delay: 250, duration: 300}}>
		Memories fade, but friends are forever
	</blockquote>
{/if}

You can specify a enter animation with in:fade and exit animation with out:fade but you’re not limited to one transition.

In Svelte you can define custom animations such as this typewriter effect, use spring and tweened motion and make smooth transitions between elements using flip animations.