refactor(TextTransition): move to Layout

1 files changed, 28 insertions, 0 deletions

diff --git a/src/lib/Layout/TextTransition.svelte b/src/lib/Layout/TextTransition.svelte
new file mode 100644
index 00000000..bd7814de
--- /dev/null
+++ b/src/lib/Layout/TextTransition.svelte
@@ -0,0 +1,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>