GSAP와 ScrollTrigger로 부드러운 스크롤 애니메이션 만들기

GSAP란?

• GSAP는 자바스크립트를 기반으로 한 애니메이션 라이브러리이다. 고성능, 간편한 API, 다양한 애니메이션 효과를 제공하며, 많은 웹사이트에서 사용되고 있다.

ScrollTrigger란?

• ScrollTrigger는 GSAP의 플러그인으로, 스크롤 위치를 기반으로 애니메이션을 트리거할 수 있다.
• 이를 통해 스크롤에 따라 애니메이션이 자연스럽게 동작하도록 설정할 수 있다.

---

 

1. 기본 html 구조

<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>

 

위의 html 코드는 4개의 섹션을 생성하는 구조이다. 각 섹션은 100vh(뷰포트 높이)를 차지하며, 페이지를 스크롤하면서 애니메이션을 적용할 대상이 된다.

---

2. CSS 스타일링

.section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  transition: background-color 0.5s;
}
.section:nth-child(odd) {
  background-color: #f0f0f0;
}
.section:nth-child(even) {
  background-color: #d0d0d0;
}

• .section은 각 섹션의 스타일을 지정하는 부분이다.
• 각 섹션은 높이가 100vh로 설정되어 전체 화면을 차지한다.
• 홀수 번째 섹션은 #f0f0f0 색상, 짝수 번째 섹션은 #d0d0d0 색상으로 배경이 다르게 설정된다.

---

3. GSAP와 ScrollTrigger 적용

gsap.utils.toArray('.section').forEach(section => {
  gsap.fromTo(section, { opacity: 0 }, {
    opacity: 1,
    scrollTrigger: {
      trigger: section,
      start: 'top 80%',
      end: 'top 20%',
      scrub: true,
      markers: true
    }
  });
});

 

• gsap.utils.toArray('.section') : 모든 .section요소를 배열로 가져온다.
• gsap.fromTo() : 각 섹션에 대해 opacity 값을 0에서 1로 변환하는 애니메이션을 적용한다.
• 애니메이션을 트리거할 요소인 section의 top부분이 화면의 80% 지점에 위치하면 애니메이션을 시작한다.
• 트리거 요소인 section의 top 부분이 화면의 20%에 위치하면 애니메이션이 끝난다.
• scrub:true - 스크롤에 맞춰 애니메이션이 부드럽게 진행된다.
• markers:true : 디버깅용으로 마커가 화면에 표시 된다.

Section 1

Section 2

Section 3

Section 4