src/lib/Layout/TextTransition.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script>
	import { tweened } from 'svelte/motion';
	import { cubicOut } from 'svelte/easing';

	export let text = '';
	export let opacityTransitionDuration = 50;
	export let blurTransitionDuration = opacityTransitionDuration;
	export let easing = cubicOut;

	let previousValue = '';
	let opacity = tweened(1, { duration: opacityTransitionDuration, easing });
	let blur = tweened(0, { duration: blurTransitionDuration, easing });

	$: {
		if (text !== previousValue)
			Promise.all([opacity.set(0), blur.set(10)]).then(() => {
				previousValue = text;

				Promise.all([opacity.set(1), blur.set(0)]);
			});
	}
</script>

<span
	style="opacity: {$opacity}; filter: blur({$blur}px); transition: opacity {opacityTransitionDuration}ms, filter {blurTransitionDuration}ms;"
>
	{previousValue}
</span>