How to know if an element is completely visible on viewport with js?

Question

I am trying to trigger animation only when they are in the viewport and only once i.e. if they again get out of viewport and comeback there will be no animation, they will be at the state in which they were when the animation ended.

Answer 1

getBoundingClientRect method returns the element's bounding box relative to the viewport
you can compare it with 0 or clientWidth/clientWidth to check if its visible or not

most of the broesers already support this even if the status still in Working Draft

Answer 2

Demo on what Rei said.

https://code.sololearn.com/WuS3WyzJ0Dsq/?ref=app