IntersectionObserver causes flickering when the element is only partially in view

I'm working on an Angular 18 project where I want to animate a button when it comes into view using the IntersectionObserver API and it works.

However, if only half of the top button is in view, it starts flickering, which is the problem I am trying to solve.

Here's my component code:

export class FooterComponent implements AfterViewInit {
@ViewChild('invite_btn') protected invite_btn!: ElementRef<HTMLAnchorElement>;

ngAfterViewInit() {
const observer: IntersectionObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.invite_btn.nativeElement.classList.add('animate__animated', 'animate__fadeInUp');
} else {
this.invite_btn.nativeElement.classList.remove('animate__animated', 'animate__fadeInUp');
}
});
});

observer.observe(this.invite_btn.nativeElement);
}
}


I tried to use an entry.IntersectionRatio check but that didn't help, because the ratio is always below 1.0.

How can I fix that? Video example:



Continue reading...