기존 페이지에 스크롤 애니메이션을 적용해 보려고 시도해 보다가 아래 소스로 적용에는 성공했습니다.

스크롤 하면 페이지 단위로 이동하는 (Fullpage) 소스를 함께 적용해서 사용중인데요.

아래 소스를 함께 적용하면 레이아웃은 깨지지 않고 잘 적용이 됩니다.

그런데 어떤때는 스크롤 애니메이션이 적용 되었다가 페이지를 리로드하면 적용이 안되는 문제가 있고요.

이경우 캐시를 삭제하면 다시 적용이 되기는 하는데, 리프레시 하면 다시 적용이 안되더라고요.

또 한가지 문제는 여러개의 DIV에 스크롤 애니메이션을 적용하면 이중 몇개만 적용이 되고 나머지는 적용이 되지 않습니다.

애니메이션이 적용되지 않는 경우는 아예 해당이미지가 보이지를 않네요.

혹시 충돌이나 멈춤현상 없이 지정한 효과대로 애니메이션이 원활하게 적용되게 하려면 어떤 부분을 확인해야 할까요?

완전한 해결이 아니더라도 도움이 될만한 조언을 구합니다.

AOS나 Wow.js 등 여러가지 라이브러리를 시도해 보다가 충돌 및 간섭 현상으로 적용하지 못했어서요.

아래 소스를 활용해서라도 원활하게 스크롤 애니메이션을 적용해 보고 싶습니다.

사용한 스크롤 애니메이션 소스를 아래에 올립니다.

도움 부탁 드립니다.

    <style>
      /* Scroll Animation (sa, 스크롤 애니메이션) */
      .sa {
        opacity: 0;
        transition: all 2s ease;
      }

      /* 아래에서 위로 페이드 인 */
      .sa-up {
        transform: translate(0, 100px);        
      }
      /* 위에서 아래로 페이드 인 */
      .sa-down {
        transform: translate(0, -100px);
      }
      /* 왼쪽에서 오른쪽으로 페이드 인 */
      .sa-right {
        transform: translate(-100px, 0);
      }
      /* 오른쪽에서 왼쪽으로 페이드 인 */
      .sa-left {
        transform: translate(100px, 0);
      }
      /* 왼쪽으로 회전하면서 페이드 인 */
      .sa-rotateL {
        transform: rotate(180deg);
      }
      /* 오른쪽으로 회전하면서 페이드 인 */
      .sa-rotateR {
        transform: rotate(-180deg);
      }
      /* 작아진 상태에서 커지면서 페이드 인 */
      .sa-scaleUp {
        transform: scale(.5);
      }
      /* 커진 상태에서 작아지면서 페이드 인 */
      .sa-scaleDown {
        transform: scale(1.5);
      }

      .sa.show {
        opacity: 1;
        transform: none;
      }
    </style>

    <script>
// Scroll Animation (sa, 스크롤 애니메이션)
const saDefaultMargin = 0;
let saTriggerMargin = 0;
let saTriggerHeight = 0;
const saElementList = document.querySelectorAll('.sa');

const saFunc = function() {
  for (const element of saElementList) {
    if (!element.classList.contains('show')) {
      if (element.dataset.saMargin) {
        saTriggerMargin = parseInt(element.dataset.saMargin);
      } else {
        saTriggerMargin = saDefaultMargin;
      }

      if (element.dataset.saTrigger) {
        saTriggerHeight = document.querySelector(element.dataset.saTrigger).getBoundingClientRect().top + saTriggerMargin;
      } else {
        saTriggerHeight = element.getBoundingClientRect().top + saTriggerMargin;
      }

      if (window.innerHeight > saTriggerHeight) {
        let delay = (element.dataset.saDelay) ? element.dataset.saDelay : 0;
        setTimeout(function() {
          element.classList.add('show');
        }, delay);
      }
    }
  }
}

window.addEventListener('load', saFunc);
window.addEventListener('scroll', saFunc);
    </script>

<div class="sa sa-up" data-sa-delay="600"><img src="images/con1.png" width=100%></div>
<div class="sa sa-right" data-sa-delay="400"><img src="images/con2.png" width=100%></div>
<div class="sa sa-left" data-sa-delay="200"><img src="images/con3.png" width=100%></div>