gistfile1.txt

<script>
/*
https://firebasestorage.googleapis.com/v0/b/heroic-tide-314615.appspot.com/o/3D%20Mockup%201.gif?alt=media&token=0ea6b519-d3e9-442d-8722-22dd59a96786
https://firebasestorage.googleapis.com/v0/b/heroic-tide-314615.appspot.com/o/3D%20Mockup%202.gif?alt=media&token=b177324b-45c9-4b84-b85d-5f32f2e0ea20
https://firebasestorage.googleapis.com/v0/b/heroic-tide-314615.appspot.com/o/3D%20Mockup%203.gif?alt=media&token=6528137f-cf32-4125-9469-d6ea4fb8ae10
*/


function updateAnimations() {
  $(".video").each(function () {
    if (
      this.getBoundingClientRect().top <= window.innerHeight &&
      this.getBoundingClientRect().bottom >= 0
    ) {
      this.classList.add("scrolled-in");
      this.classList.remove("scrolled-out");
    } else {
      this.classList.remove("scrolled-in");
      this.classList.add("scrolled-out");
    }
  });
}

function main() {
  $(document).scroll(function () {
    updateAnimations();
  });
  $(".video").each(function () {
    this.onload = updateAnimations;
  });
  updateAnimations();
  $("#mockup-1").attr("src", "https://firebasestorage.googleapis.com/v0/b/heroic-tide-314615.appspot.com/o/3D%20Mockup%201.gif?alt=media");
  $("#mockup-2").attr("src", "https://firebasestorage.googleapis.com/v0/b/heroic-tide-314615.appspot.com/o/3D%20Mockup%202.gif?alt=media");
  $("#mockup-3").attr("src", "https://firebasestorage.googleapis.com/v0/b/heroic-tide-314615.appspot.com/o/3D%20Mockup%203.gif?alt=media");
}

$(main);
</script>

<style>
.video {
  transition: opacity 1s, transform 1s;
  opacity: 0;
  transform: translateX(-20vw);
}
.video.right {
  transform: translateX(20vw);
}

.video.scrolled-in {
  opacity: 1;
  transform: translateX(0);
}

.nav,
.cta-nav,
.container-nav {
  z-index: 10;
}

.cta-nav a {
  color: white;
  text-decoration: none;
}
</style>