[javascript] GSAP를 활용한 애니메이션 포트폴리오 및 쇼케이스

27 Nov 2023

javascript

소개

GSAP(GreenSock Animation Platform)는 웹 애니메이션 및 상호작용을 구축하기 위한 강력한 JavaScript 라이브러리입니다. GSAP는 그래픽, 텍스트 및 UI 요소의 부드럽고 진동적인 애니메이션을 만들 수 있습니다. 이러한 애니메이션은 웹 포트폴리오 및 쇼케이스에서 특히 인상적으로 보일 수 있습니다.

이 글에서는 GSAP를 사용하여 애니메이션 포트폴리오 및 쇼케이스를 구축하는 방법에 대해 알아보겠습니다.

GSAP 설치

GSAP를 활용하기 위해서는 다음의 단계를 따라 설치해야 합니다:

GSAP의 공식 웹사이트(https://greensock.com/gsap/)에 접속합니다.
“Download GSAP” 버튼을 클릭하여 라이브러리를 다운로드합니다.
다운로드한 파일을 원하는 경로에 압축을 해제합니다.
HTML 파일의 <head> 태그 내부에 다음과 같이 GSAP 라이브러리를 추가합니다:

<script src="path/to/gsap.js"></script>

이제 GSAP를 사용할 준비가 되었습니다!

애니메이션 포트폴리오 생성

GSAP를 사용하여 애니메이션 포트폴리오를 만드는 예제 코드를 살펴보겠습니다.

const portfolioItems = document.querySelectorAll('.portfolio-item');

portfolioItems.forEach(item => {
  const tl = gsap.timeline({
    defaults: {
      duration: 0.8,
      ease: "power2.out",
    }
  });

  tl.from(item, { opacity: 0, y: 50 })
    .from(item.querySelector('.portfolio-item__title'), { x: -50, opacity: 0 })
    .from(item.querySelector('.portfolio-item__description'), { x: 50, opacity: 0 })
    .from(item.querySelector('.portfolio-item__button'), { y: 30, opacity: 0 });
});

위의 코드에서는 .portfolio-item 클래스를 가진 HTML 요소들을 선택한 후에, GSAP의 timeline을 사용하여 각각의 요소에 대한 애니메이션을 정의합니다. 각 애니메이션은 일정한 시간(duration)과 이징(ease)을 가지며, 요소의 투명도(opacity)와 위치(y 또는 x 좌표)를 변경해 애니메이션 효과를 부여합니다.

쇼케이스 생성

GSAP를 사용하여 애니메이션 쇼케이스를 만드는 예제 코드를 살펴보겠습니다.

const showcaseItems = document.querySelectorAll('.showcase-item');

showcaseItems.forEach(item => {
  const tl = gsap.timeline({
    defaults: {
      duration: 1,
      ease: "elastic.out(1, 0.4)",
    }
  });

  tl.from(item, { opacity: 0, scale: 0.5 })
    .from(item.querySelector('.showcase-item__title'), { y: 30, opacity: 0 })
    .from(item.querySelector('.showcase-item__description'), { x: -30, opacity: 0 })
    .from(item.querySelector('.showcase-item__button'), { y: -30, opacity: 0 });
});

위의 코드에서는 .showcase-item 클래스를 가진 HTML 요소들을 선택한 후에, timeline을 사용하여 각각의 요소에 대한 애니메이션을 정의합니다. 애니메이션은 elastic.out 이징을 사용하여 요소의 투명도(opacity), 크기(scale), 위치(y 또는 x 좌표)를 변경합니다.

결론

GSAP를 활용하여 애니메이션 포트폴리오 및 쇼케이스를 만들어 웹사이트에 동적이고 매력적인 요소를 추가할 수 있습니다. GSAP는 풍부한 기능과 다양한 애니메이션 이징을 제공하여 사용자에게 멋진 시각적 경험을 제공할 수 있습니다.

더 자세한 내용은 GSAP 공식 문서(https://greensock.com/docs/)를 참조하시기 바랍니다.