스크롤 위치 계산 애니메이션(GSAP&ScrollTo)

GSAP의 ScrollTo 플러그인을 활용하여 순차적으로 요소들이 불러와지는 애니메이션을 구현한다.
감시할 섹션에 scroll-spy 클래스를 추가하고, 애니메이션을 추가할 요소에 .back-to-position 및 to-방향 클래스를 추가

코드

플러그인 추가

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"
    integrity="sha512-UxP+UhJaGRWuMG2YC6LPWYpFQnsSgnor0VUF3BHdD83PS/pOpN+FYbZmrYN+ISX8jnvgVUciqP/fILOXDjZSwg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollToPlugin.min.js"
    integrity="sha512-1OG9UO4krPizjtz/c9iDbjCqtXznBYdJeD4ccPaYfJHzC6F1qoQ3P1bgQ3J8lgCoK5qGVCqsY4+/RKjLDzITVQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

GSAP 아래에 ScrollTo 플러그인 추가

아래에 Find your store 섹션 추가

  <section class="find-store scroll-spy">
    <div class="inner">

      <img class="texture1" src="./images/find_store_texture1.png" alt="" />
      <img class="texture2" src="./images/find_store_texture2.png" alt="" />
      <img class="picture picture1 back-to-position to-right delay-0" src="./images/find_store_picture1.jpg" alt="" />
      <img class="picture picture2 back-to-position to-right delay-1" src="./images/find_store_picture2.jpg" alt="" />

      <div class="text-group">
        <img class="title back-to-position to-left delay-0" src="./images/find_store_text1.png" alt="" />
        <img class="description back-to-position to-left delay-1" src="./images/find_store_text2.png" alt="" />
        <div class="more back-to-position to-left delay-2">
          <a class="btn" href="javascript:void(0)">매장 찾기</a>
        </div>
      </div>

    </div>
  </section>

CSS

애니메이션을 위한 클래스 추가

.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: 1s;
}

.show .back-to-position.delay-2 {
  transition-delay: 2s;
}

.show .back-to-position.delay-3 {
  transition-delay: 3s;
}

Find your store 섹션 CSS

/* FIND THE STORE */
.find-store {
  background-image: url('../images/find_store_bg.jpg');
}

.find-store .inner {
  height: 400px;
}

.find-store .texture1 {
  position: absolute;
  top: 0;
  left: 400px;
}

.find-store .texture2 {
  position: absolute;
  bottom: 0;
  right: 0;
}

.find-store .picture {
  border-radius: 50%;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, .5);
  position: absolute;
}

.find-store .picture1 {
  top: -60px;
  left: 0;
}

.find-store .picture2 {
  top: 150px;
  left: 250px;
}

.find-store .text-group {
  position: absolute;
  top: 120px;
  left: 550px;
}

.find-store .text-group .title {
  margin-bottom: 20px;
}

.find-store .text-group .description {
  margin-bottom: 20px;
}

JS

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