I'm just starting out with Vuejs and I've recently installed the vue-countup-v2 npm package. I successfully imported it into my Vue component and noticed that it works perfectly when the page loads. However, I am interested in triggering the CountUp component when the user scrolls down the screen, rather than upon page load. The vue-countup-v2 package includes a method called start() which can be triggered for this purpose, but I'm unsure of how to do so.
Below is the code snippet:
<template>
<div id="main-wrapper" class="flex justify-around w-full p-12 my-12">
<CountUp
id="count-up"
:delay="delay"
:endVal="endVal[index]"
:options="options"
/>
</div>
</template>
<script>
import CountUp from 'vue-countup-v2';
import inViewport from 'in-viewport';
export default {
name: "NumberAnime",
components: {
CountUp,
},
data() {
return {
delay: 1000,
endVal: [40, 300000, 25000, 350],
options: {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '',
suffix: '',
}
}
},
mounted() {
inViewport('elementId', 'the function I want to callback')
},
}
</script>