<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={end === start || $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>
