Delay animation until section/div is in viewport

[atecey]

Is i t possible to delay the animation until the div is within the viewport e.g. if I wanted to add fadeIn on elements once I have scrolled down the page?

[Jiayi Hu]

Animations are triggered when the relative state changes from value A to value B A => B. In examples any transition is accepted transition('* => *', useAnimation(bounce)) but you can just change the state only when the div is in the viewport. The animation won't be triggered until then.

[Amruth Pillai]

I know this issue is closed, but could someone guide me with a short snippet/example on how one could detect whether a div is in the viewport? I've only come across libraries from jQuery (such as waypoint) to do this, but since I'm using ng-bootstrap in combination, I didn't want to depend on jQuery for that. Is there any other library or any native method to do the same?