Animation not playing

[unrealxqt]

Hi,

Raising an issue for help.

I have an Angular 14 project set up and running and I'd like to integrate ng2-animate-on-scroll into it.

I think I did everything right, (hopefully someone can correct me here), but the animation is not playing when the content is scrolled into the viewport.

This is what I got so far:

packages.json:

"dependencies": {
    "ng2-animate-on-scroll": "^2.3.2",
}

app.module.ts:

@NgModule({
  declarations: [
    .
    .
    .
  ],
  imports: [
   .
   .
   .
    AnimateOnScrollModule.forRoot()
  ],
  providers: [
   ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

<header>
  <app-navbar></app-navbar>
</header>
<router-outlet></router-outlet>
<app-footer></app-footer>
<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
    mauris ut felis mattis auctor quis nec augumcorper ultricies fringilla.
    Nulla tincidunt urna nec eros aliquet feugiat.
  </p>

  <div animateOnScroll animationName="animated fadeIn">
    animated content upon appearing in the viewport..
  </div>
</div>

With these modifications the div that is supposed to be animated just simply displays in the dom without being animated.
Do you have any suggestions?
I am willing to provide more code if required.

P.S.: I have a feeling it has nothing to do with this library but some other setting.