about JavaScript help to implement fade-in and fade-out animation

Question

const animation=document.querySelectorAll('.fade');
console.log(animation);
window.addEventListener("scroll",fadeIN);
function fadeIN()
{
  for (let i=0; i<animation.length; i++)
  {
    let j=animation[i];
    let height = j.getBoundingClientRect().top - window.innerHeight + 20; 
    if (height < 0) {
      j.classList.add("visible");
    } else {
      j.classList.remove("visible");
    }
  }
}
fadeIN()

help me to change this logic

let height = j.getBoundingClientRect().top - window.innerHeight + 20; 

with simple JavaScript code with using web API libraries

Answer 1

this javascipt code is about to fade-in fade-out animation code is working but i have to change this DOMreact code,let height = j.getBoundingClientRect().top - window.innerHeight + 20; with simple javascript logic is it possible