[javascript] GSAP를 사용한 헤더 애니메이션 및 스크롤 효과

27 Nov 2023

javascript

GSAP(GreenSock Animation Platform)은 자바스크립트를 사용하여 웹사이트나 애플리케이션에 동적인 애니메이션 효과를 추가할 수 있는 강력한 라이브러리입니다. 이번 블로그 포스트에서는 GSAP를 사용하여 헤더 애니메이션과 스크롤 효과를 구현하는 방법을 알아보겠습니다.

1. GSAP 설치 및 설정

GSAP를 사용하기 위해서는 우선 해당 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 GSAP를 설치할 수 있습니다.

npm install gsap

GSAP를 설치한 후에는 해당 라이브러리를 프로젝트에 추가하여 사용할 수 있습니다. 다음은 HTML 문서에 GSAP를 추가하는 예시입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>GSAP Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

GSAP를 추가한 후, 사용할 자바스크립트 파일에서는 다음과 같이 GSAP를 import하여 사용할 수 있습니다.

import { gsap } from "gsap";

2. 헤더 애니메이션 구현하기

GSAP를 사용하여 헤더에 애니메이션 효과를 추가하기 위해 gsap.to() 메서드를 사용합니다. 다음은 헤더의 배경색과 로고의 위치를 애니메이션으로 변경하는 예시 코드입니다.

const header = document.querySelector(".header");

gsap.to(header, {
  backgroundColor: "red",
  duration: 1,
});

const logo = document.querySelector(".logo");

gsap.to(logo, {
  x: 50,
  duration: 1,
});

위의 예시 코드에서 .header는 헤더의 CSS 클래스를 가리키며, .logo는 로고의 CSS 클래스를 가리킵니다. 애니메이션 효과의 속성들은 gsap.to() 메서드의 첫 번째 인자로 전달되는 요소에 적용됩니다.

3. 스크롤 효과 구현하기

헤더에 스크롤 효과를 추가하기 위해서는 gsap.scrollTrigger를 사용합니다. 다음은 헤더가 스크롤될 때 투명도가 변경되는 예시 코드입니다.

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const header = document.querySelector(".header");

gsap.to(header, {
  opacity: 0,
  scrollTrigger: {
    trigger: header,
    start: "top top",
    end: "bottom top",
    scrub: true,
  },
});

위의 예시 코드에서 ScrollTrigger를 import하고, gsap.registerPlugin() 메서드를 사용하여 플러그인을 등록합니다. 헤더의 투명도가 스크롤에 따라 변경되는 애니메이션은 gsap.to() 메서드의 scrollTrigger 속성에 설정되어 있습니다.

마무리

이번 블로그 포스트에서는 GSAP를 사용하여 헤더 애니메이션과 스크롤 효과를 구현하는 방법을 알아보았습니다. GSAP는 다양한 애니메이션 효과를 구현할 수 있는 강력한 라이브러리이므로 웹 개발자들에게 유용한 도구입니다. 추가적인 정보와 예제는 GSAP 공식 문서를 참고하시기 바랍니다.

참고 자료:

GSAP 공식 문서