0

I am trying to get animations on scroll to work within an angular7 frontend, however it doesn't work within a router-outlet. I assume this has to do with how angular handles scrolling position within router-outlets as suggested by a lot of related questions on scrolling.

My questions: How can the intended behavior be achieved within router-outlets? Is this even possible? Does someone have an explanation on why the problem occurs?

Specifically, I would like to apply a zoomIn animation from animations.css on some divs once they are reached via scrolling. In order to get this to work, I am using the package "ng2-animate-on-scroll", which works well, until the divs are located within a router-outlet.

In my app.component.html:

<div animateOnScroll animationName="animated zoomIn">
     text to zoom in on scroll <---works
</div>

<router-outlet></router-outlet> <--- everything in here doesn't work

<div animateOnScroll animationName="animated zoomIn">
     text to zoom in on scroll <---doesn't work
</div>

When I place some divs within app.component.html above the router outlet, the animations on scroll are visible, and work as expected. However, everything within the router-outlet or below is not animated.

Any suggestions?

ioto
  • 11
  • 1

1 Answers1

1

Turns out the pages under router-outlet use their own module, which is why ng2-animate-on-scroll has been imported within the wrong module file. Apparently,it could not be inherited from app.module.ts.

ioto
  • 11
  • 1