diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/TextTransition.svelte | 28 | ||||
| -rw-r--r-- | src/lib/Tools/RandomFollower.svelte | 3 |
2 files changed, 30 insertions, 1 deletions
diff --git a/src/lib/TextTransition.svelte b/src/lib/TextTransition.svelte new file mode 100644 index 00000000..bd7814de --- /dev/null +++ b/src/lib/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> diff --git a/src/lib/Tools/RandomFollower.svelte b/src/lib/Tools/RandomFollower.svelte index 0bf4d76e..3117b41a 100644 --- a/src/lib/Tools/RandomFollower.svelte +++ b/src/lib/Tools/RandomFollower.svelte @@ -2,6 +2,7 @@ import { followers } from '$lib/Data/AniList/following'; import RateLimited from '$lib/Error/RateLimited.svelte'; import Skeleton from '$lib/Loading/Skeleton.svelte'; + import TextSwap from '$lib/TextTransition.svelte'; import InputTemplate from './InputTemplate.svelte'; let submission = ''; @@ -23,7 +24,7 @@ <p /> <a href={`https://anilist.co/user/${user.id}`} target="_blank"> - {user.name} + <TextSwap text={user.name} /> </a> {:catch} <RateLimited type="Followers" list={false} /> |