Компонент для промотки чисел от и до (`npm install --save vue-observe-visibility и gsap`)

DigitItem.vue

<template>
  <div
    v-observe-visibility="{
      callback: visibilityChanged,
    }"
    class="digit-item"
  >test {{digit}}</div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'nuxt-property-decorator';
import { TweenLite } from 'gsap';

@Component({})
export default class DigitItem extends Vue {
  @Prop({ default: 0 }) start!: number;
  @Prop({ default: 1 }) duration!: number;
  @Prop({ default: 0 }) end!: number;

  tn = this.start;

  @Emit()
  visibilityChanged(isVisible: boolean, entry: IntersectionObserverEntry) {
    if (isVisible) {
      const tl = TweenLite;
      tl.to(this.$data, this.duration, { tn: this.end });
    }
  }

  get digit() {
    return this.tn.toFixed(0);
  }
}
</script>

<style lang="scss" scoped>
.digit-item {
  font-size: 100px;
}
</style>