<style>
    #my-work img{
      translate: -100%;
      opacity: 0;
      transition: 800ms ease;
    }
    #my-work img.show{
      translate: 0;
      opacity: 1;
    }
  </style>
  
  <script>
    const images = document.querySelectorAll("#my-work img");

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("show");
          } else {
            entry.target.classList.remove("show");
          }
        });
      },
      {
        threshold: 1,
        rootMargin: "0px 0px 0px 400px"
      }
    );

    images.forEach((img) => observer.observe(img));
  </script>