> For the complete documentation index, see [llms.txt](https://close.gitbook.io/yun-wei-bi-ji/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://close.gitbook.io/yun-wei-bi-ji/centos/vue/xiang-mu/2-17.-shu-zi-gun-dong-dong-hua-shi-xian.md).

# 2 17.数字滚动动画实现

* #### 安装

```js
 npm i gsap
```

* #### 封装组件

> src/components/CounTo.vue

```js
<template>
    {{ d.num.toFixed(2) }}
</template>


<script setup>
import { reactive,watch } from 'vue';
import gsap from 'gsap'


const props = defineProps({
    value: {
        type:Number,
        default: 0
    }
})

const d = reactive({
    num: 0
})


function AnimateToValue(){
    gsap.to(d, {
        duration: 0.5,
        num: props.value
    })
}

AnimateToValue()

watch(()=>props.value, ()=>AnimateToValue())

</script>
```

* #### 调用

```js
<span class="text-3xl font-bold text-gray-500">
                        <!-- {{ item.value }} -->
                        <CountTo :value="item.value"/>
                    </span>




import CountTo from '~/components/CountTo.vue';
```