CODEWITHSUNDEEP
angulartypescript
khaled mahmoud
khaled mahmoud

Reputation: 97

trigger CountUp function when element comes into view

I'm using this library

https://github.com/inorganik/ngx-countUp

is there A way to activate the counting animation only when reach the section of numbers

in another words to trigger it (<h1 [countUp]="345">0</h1>) when element is scrolled into view

is that possible?

Upvotes: 4

Views: 1245

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17620

Demo Viewchild is a way for this.

in html make value as parametric.

<h1 #counter [countUp]="param">0</h1>

in component

@ViewChild('counter') counter: ElementRef;
param=0;

with hostlistener listen scroll and check if if scroll reach to html if yes change count to 365

@HostListener('window:scroll', ['$event']) // for window scroll events
onWindowScroll(event) {
   var rect = this.counter.nativeElement.getBoundingClientRect();
   var elemTop = rect.top; var elemBottom = rect.bottom;
   (elemTop >= 0) && (elemBottom <= window.innerHeight) ? this.param=365:null
}

Upvotes: 2

Related Questions