diff options
Diffstat (limited to 'src/lib/Layout')
| -rw-r--r-- | src/lib/Layout/TextTransition.svelte | 28 |
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> |