Reputation: 97
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
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