skip to content

Rolling Text Animation Using Svelte

In this post you will find example of how to create a rolling text animation using Svelte.

The Code

<script>
	import { onMount, onDestroy } from 'svelte';
	import { slide } from 'svelte/transition';

	let greetings = ['Hello', 'Bonjour', 'Konnichiwa'];
	let index = 0;
	let roller;

	onMount(() => {
		roller = setInterval(() => {
			if (index === greetings.length - 1) index = 0;
			else index++;
		}, 1250);
	});

	onDestroy(() => {
		clearInterval(roller);
	});
</script>

{#key index}
	<h1 transition:slide>{greetings[index]}!</h1>
{/key}