Как заставить изображение исчезать один раз, используя простой javascript?

Question

Я использую библиотеку AOS (анимация при прокрутке) в моем html, чтобы помочь постепенному появлению изображений, но javascript, чтобы вызвать фактическое затухание. Я хочу, чтобы изображение постепенно появлялось, когда я прокручиваю мимо, но не исчезает, когда я прокручиваю назад. Код ниже - это то, что я пробовал до сих пор, но изображение не отображается. Я видел способ сделать это в jQuery, но хотел посмотреть, смогу ли я сделать это простым JS. Я добился того, чтобы изображение появлялось и постепенно увеличивалось, используя обработчик onscroll, но столкнулся с проблемой его постепенного нарастания, если я вернулся к началу страницы. Ниже я использую прослушиватель событий

HTML:

//sets the point at which the image will fade in
    let pic = document.getElementById("pic");
    let characterCaption = document.getElementById("characters");
    let triggerAt = 100;
    function getPic() {
      pic.onscroll;
      let topOfImage = pic.scrollTop + triggerAt;
      return topOfImage;
    }

window.addEventListener("scroll", fadeInImage);

//attempt to fade in image at certain point and prevent image from fading in again 
function fadeInImage() {
      let currentPosition = window.pageYOffset;
      let topOfImage = getPic();
        if (currentPosition > topOfImage) {
          pic.style.visibility = "visible";
          characterCaption.style.visibility = "visible";
          window.removeEventListener("scroll", fadeInImage);
        }
    }

    <img id="pic" src="https://cdn.vox-cdn.com/thumbor/MZRJnpwAMIHQ5-XT4FwNv0rivw4=/1400x1400/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/19397812/1048232144.jpg.jpg" width="500px" height="650px" data-aos="fade-left" data-aos-duration="2000" data-aos-easing="ease-in-sine">
    <p id="characters"> picture caption </p>