action

Type Writter

An animation technique that makes a string of text appear on screen letter by letter, as if it's being typed out in real time by a typewriter

Set Up #

Import typewriter action in the script tag.

Example.svelte

<script>
	import { typewriter } from '@sans-ui/core';
</script>

Usage #

For example, we can play typewriter transition effect when the message appears in the DOM.

Example.svelte

<script>
	import { onMount } from 'svelte';
	import { typewriter } from '@sans-ui/core';

	let showTitle = false;
	onMount(() => {
		showTitle = true;

		return () => {
			showTitle = false;
		};
	});
</script>

{#if showTitle}
	<span
		class="text-xl font-light text-center dark:text-neutral-100"
		transition:typewriter={{ speed: 1.5 }}
	>
		Contributions are more than welcome! ^_^
	</span>
{/if}