/** Shopify CDN: Minification failed

Line 116:0 Unexpected "<"
Line 118:2 Comments in CSS use "/* ... */" instead of "//"
Line 120:4 Expected identifier but found "$"
Line 131:4 Expected identifier but found "$"
Line 142:4 Expected identifier but found "$"
Line 153:4 Expected identifier but found "$"
Line 164:4 Expected identifier but found "$"
Line 177:2 Unexpected "$"

**/
.m_fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* bottomin */
.m_fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* leftin */
.m_fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* rightin */
.m_fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* smallin */
.m_zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes zoomOutAnime {
  0% {
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  //   movie
  function fadeAnime() {
    $('.fadeInTrigger').each(function () {
      var elemPos = $(this).offset().top + 200;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll >= elemPos - windowHeight) {
        $(this).addClass('m_fadeUp');
      } else {
        $(this).removeClass('m_fadeUp');
      }
    });

    $('.fadeInTrigger2').each(function () {
      var elemPos = $(this).offset().top + 200;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll >= elemPos - windowHeight) {
        $(this).addClass('m_fadeLeft');
      } else {
        $(this).removeClass('m_fadeLeft');
      }
    });

    $('.fadeInTrigger3').each(function () {
      var elemPos = $(this).offset().top + 200;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll >= elemPos - windowHeight) {
        $(this).addClass('m_fadeRight');
      } else {
        $(this).removeClass('m_fadeRight');
      }
    });

    $('.fadeInTrigger4').each(function () {
      var elemPos = $(this).offset().top + 200;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll >= elemPos - windowHeight) {
        $(this).addClass('m_zoomOut');
      } else {
        $(this).removeClass('m_zoomOut');
      }
    });

    $('.fadeInTrigger5').each(function () {
      var elemPos = $(this).offset().top + 200;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll >= elemPos - windowHeight) {
        $(this).addClass('m_fadeIn');
      } else {
        $(this).removeClass('m_fadeIn');
      }
    });

  }

  $(window).scroll(function () {
    fadeAnime();
  });

</script>