src/lib/Layout/NumberTicker.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
29
30
31
32
33
34
35
36

<script>
  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;

  const count = tweened(start, {
    duration: duration,
    easing: cubicOut,
    delay: delay
  });

  $: {
    count.set(end);
  }
</script>

<span class="counter" class:visible={$count !== start}>
  {Math.round($count)}
</span>

<style lang="scss">
  .counter {
    $duration: 0.2s;

    opacity: 0;
    transition: opacity $duration ease-out, transform $duration ease-out;
  }

  .counter.visible {
    opacity: 1;
  }
</style>