search

jiayihu / ng-animate

🌙 A collection of cool, reusable and flexible animations for Angular 14+
https://jiayihu.github.io/ng-animate/
MIT License
720 stars 72 forks source link

Delay animation until section/div is in viewport #20

Closed atecey closed 5 years ago

atecey commented 5 years ago

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?

jiayihu commented 5 years ago

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.

AmruthPillai commented 5 years ago

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?