How to start countup only when scrolled?

[sofyanlabs]

I want to start Countup Event when div scrolled, not on page load.

how to implement this?

[xlsdg]

When div scrolled, call instance.update().

[sofyanlabs]

can you give me example of code for this one?

[unek]

you can use :delay="-1" and vue-in-viewport-mixin to trigger instance.start().

[uzzal-ht]

I have same issue. Can you share any live example?

[babyradJiri]

would appreciate live example as well

[ghost]

I have same issue. Can you share any live example? would appreciate live example as well can you give me example of code for this one? When div scrolled, call instance.update().

Hello, I was having problems of this type and finally I solved it as follows.

First add the scroll directive before your Vue instance:

Vue.directive ('scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value (evt, el)) {
        window.removeEventListener ('scroll', f)
      }
    }
    window.addEventListener ('scroll', f)
  }
})

Then, where they place the component, they add the attribute ref = "firstcomponent" (change the name of the ref) and v-scroll = "onReady" (method that will update the counter) to each component that they want to "update" to the time to scroll.

Example:

<div class="iCountUp">
<ICountUp :delay="delay" :endVal="endVal" :options="options" ref="firstcomponent" v-scroll="onReady"/>
</div>

Finally, in the method, they can do an if of this type:

if (window.scrollY> 800) {
                this.$refs.firstcomponent.update(that.endVal + 100);
 }

By doing this, each time the scrollY is greater than 800, each component will be updated with the assigned value, in this case "100".

[laurensV]

There is already a scroll spy in the countup.js library, but because instance.start() is always called, this option (enableScrollSpy) doesn't work with vue-countup-v2. PR needs to be made to only run .start() when enableScrollSpy is disabled