aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Layout/NumberTicker.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/Layout/NumberTicker.svelte')
-rw-r--r--src/lib/Layout/NumberTicker.svelte25
1 files changed, 19 insertions, 6 deletions
diff --git a/src/lib/Layout/NumberTicker.svelte b/src/lib/Layout/NumberTicker.svelte
index b5e2f49c..3bd7e6c8 100644
--- a/src/lib/Layout/NumberTicker.svelte
+++ b/src/lib/Layout/NumberTicker.svelte
@@ -1,11 +1,24 @@
<script>
+ import { run } from 'svelte/legacy';
+
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
- export let start = 0;
- export let end = 100;
- export let duration = 2000;
- export let delay = 0;
+ /**
+ * @typedef {Object} Props
+ * @property {number} [start]
+ * @property {number} [end]
+ * @property {number} [duration]
+ * @property {number} [delay]
+ */
+
+ /** @type {Props} */
+ let {
+ start = 0,
+ end = 100,
+ duration = 2000,
+ delay = 0
+ } = $props();
const count = tweened(start, {
duration: duration,
@@ -13,9 +26,9 @@
delay: delay
});
- $: {
+ run(() => {
count.set(end);
- }
+ });
</script>
<span class="counter" class:visible={$count !== start}>