[javascript] GSAP를 사용한 스크롤 애니메이션 구현하기

27 Nov 2023

javascript

GSAP(GreenSock Animation Platform)은 웹 애니메이션을 구현하는 데 사용되는 강력하고 유연한 JavaScript 라이브러리입니다. 이번 블로그에서는 GSAP를 사용하여 스크롤 애니메이션을 구현하는 방법을 알아보겠습니다.

1. GSAP 설치하기

GSAP를 사용하기 위해 우선 해당 라이브러리를 설치해야 합니다. npm을 사용하는 경우 아래의 명령어를 실행하여 GSAP를 설치합니다.

npm install gsap

또는 CDN을 사용할 수도 있습니다. HTML 파일의 <head> 태그 내에 다음 코드를 추가합니다.

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

2. HTML 구조 준비하기

스크롤 애니메이션을 적용할 HTML 요소들을 준비합니다. 예를 들어, 애니메이션을 적용할 요소를 <div>로 감싸고 해당 <div>에 클래스를 지정합니다.

<div class="scroll-animation">
  <!-- 애니메이션을 적용할 요소들 -->
</div>

3. CSS 스타일 설정하기

GSAP를 사용하여 스크롤 애니메이션을 구현하기 위해 클래스에 적절한 CSS 스타일을 설정해야 합니다. 애니메이션의 시작과 끝 상태에 대한 스타일을 지정하세요.

.scroll-animation {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

4. JavaScript로 애니메이션 구현하기

GSAP는 JavaScript를 사용하여 애니메이션을 구현합니다. 해당 애니메이션을 적용하고 싶은 요소들을 선택한 후, GSAP의 from() 메서드를 사용하여 시작 상태로 설정하고, to() 메서드를 사용하여 애니메이션의 종료 상태로 설정합니다.

const animationElement = document.querySelector('.scroll-animation');

gsap.from(animationElement, {
  opacity: 0,
  y: 50,
  duration: 0.5,
  scrollTrigger: {
    trigger: animationElement,
    start: 'top 80%',
    end: 'top 20%',
    scrub: true,
  },
});

위의 코드에서 from() 메서드의 첫 번째 인수로 애니메이션을 적용할 요소를 선택하고, 두 번째 인수에는 애니메이션의 시작 상태를 설정합니다. to() 메서드는 애니메이션의 종료 상태를 설정합니다. scrollTrigger 속성을 사용하여 스크롤 트리거를 설정할 수 있습니다.

5. 완성된 스크롤 애니메이션 확인하기

설정이 완료되었으면 웹 페이지를 브라우저에서 열고 스크롤을 통해 애니메이션을 확인해보세요. 지정한 시작 위치에서 요소가 페이드 인하면서 이동하는 애니메이션을 볼 수 있을 것입니다.

6. 참고 자료

이제 GSAP를 사용하여 스크롤 애니메이션을 구현하는 방법을 알게 되었습니다. GSAP를 활용하여 웹 페이지에 다양한 효과를 부여해보세요!