[애니메이션] 화면에 나타날 때 실행

ScrollMagic

스크롤과 요소의 상호 작용을 위한 자바스크립트 라이브러리
어떤 요소가 현재 화면에 보이는 상태인지를 확인할 때 사용

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>

html

<div class="wrapper scroll-spy">
  <div class="inner">
    <h2 class="back-to-position to-right delay-0">TEST</h2>
    <h4 class="back-to-position to-left delay-1">TEST</h4>
  </div>
</div>
<div class="wrapper scroll-spy">
  <div class="inner">
    <h2 class="back-to-position to-right delay-0">TEST</h2>
    <h4 class="back-to-position to-left delay-1">TEST</h4>
  </div>
</div>
<div class="wrapper scroll-spy">
  <div class="inner">
    <h2 class="back-to-position to-right delay-0">TEST</h2>
    <h4 class="back-to-position to-left delay-1">TEST</h4>
  </div>
</div>

css

.wrapper {
  background: orange;
}
.wrapper:nth-child(2) {
  background: cornflowerblue;
}
.inner {
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  color: #fff;
}
.back-to-position {
  opacity: 0;
  transition: 1s;
}
.back-to-position.to-right {
  transform: translateX(-150px);
}
.back-to-position.to-left {
  transform: translateX(150px);
}
.show .back-to-position {
  opacity: 1;
  transform: translateX(0);
}
.show .back-to-position.delay-0 {
  transition-delay: 0s;
}
.show .back-to-position.delay-1 {
  transition-delay: 0.3s;
}

javascript

const spyEls = document.querySelectorAll('.scroll-spy')
spyEls.forEach(function(spyEl){
  new ScrollMagic
    .Scene({ // 감시할 장면(Scene)을 추가
      triggerElement: spyEl, // 보여짐 여부를 감시할 요소를 지정
      triggerHook: .8 // 화면의 80% 지점에서 보여짐 여부 감시
    })
    .setClassToggle(spyEl, 'show') // 요소가 화면에 보이면 show 클래스 추가
    .addTo(new ScrollMagic.Controller()) // 컨트롤러에 장면을 할당(필수!)
})

적용하고자 하는 div태그에 scroll-spy클래스 설정
js설정후 80%지점에서 보여지면 그 요소에는 show라는 클래스가 붙여진다.
css를 통해 애니메이션을 적용하고 싶은 요소에 클래스 이름으로 명시한다.