Start animation when element is scrolled or is visible in viewport about ngx-countup

[anna-schndr]

I have the same problem and can't find a solution. Javascript detecting the windows scroll position doesn't seen to work. Are there any solutions?

[inorganik]

You have to use a scroll spy - I made this one for a separate project. It's not bulletproof, but it's pretty good. You could use it like this:

<h1 [countUp]="myEndVal"  appScrollSpy [inView]="true" [emitTrueOnce]="true" (scrollSpy)="setCountUp()"></h1>

Then in your component:

setCountUp() {
  this.myEndVal = 345; // whatever number you want to count to
}

This is what it's doing: the scroll spy directive is using the option inView - it emits when the element is in view, the event (scrollSpy) is handled by a setCountUp() method - all it does is set a value to myEndVal. The countUp directive automatically defers animation until you set an end val.

PS you will need a window provider for the scroll spy

[inorganik]

Going to go ahead and close this, hopefully the scroll spy solves your issues