// the element that you are observing (just add #yourElement in the template) for this query to work @ViewChild('yourElement') yourElement: ElementRef; ngAfterViewInit() { const threshold = 0.2; // how much % of the element is in view const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { // run your animation code here observer.disconnect(); // disconnect if you want to stop observing else it will rerun every time its back in view. Just make sure you disconnect in ngOnDestroy instead } }); }, { threshold } ); observer.observe(this.yourElement.nativeElement); }