Animate only if the widgets are inside the ViewPort or visible portion of the screen [Web]

I have multiple distinct widgets inside a column and every widget has some animation effects, upon the user reaching the respective widget by scrolling they will animate which I want, but before that, if they are hidden from the user's view part means not inside the viewport, then they will not animate.

But here the issue is they all are animating at once after the website loads.

Reference - https://www.stryve.online/