Javascript & Typescript

GSAP: 타임라인 기반 애니메이션 자바스크립트 라이브러리

0

웹 개발에 있어 애니메이션은 사용자 경험을 풍부하게 만들고, 웹사이트에 생동감을 불어넣는 중요한 요소입니다. GSAP는 타임라인 기반의 자바스크립트 라이브러리로, 다양한 웹 프레임워크와의 호환성과 뛰어난 성능으로 많은 개발자들의 선택을 받고 있는데, GSAP의 주요 장점은 다음과 같습니다:

  • 높은 점유율: Vue와 React, 두 가장 인기 있는 프론트엔드 프레임워크를 모두 지원하며, 관련 자바스크립트 기반 라이브러리 중 가장 높은 점유율을 자랑합니다.
  • 성능 우위: 비슷한 점유율을 보이는 다른 인기있는 애니메이션 라이브러리인 MIT 라이센스의 Anime.js와 비교했을 때, GSAP가 성능상의 우위를 보입니다.
  • 유연성: 타임라인 기반의 애니메이션 제어는 복잡한 애니메이션 시퀀스를 쉽게 구현할 수 있게 해주어, 개발자에게 큰 유연성을 제공합니다.

하지만, GSAP는 오픈소스가 아니며, 일부 추가 기능은 상용 라이센스를 요구하는 만큼, 필요한 기능을 제공하고 있는지 확인 할 필요가 있으며, 이는 프로젝트의 예산이나 라이센스 정책에 따라 고려해야 할 부분입니다. GSAP를 시작하기 위해서는, 공식 문서와 스타터 템플릿을 활용할 수 있습니다:

GSAP란?

웹 개발 분야에서 애니메이션은 사용자 경험을 개선하고, 웹사이트나 애플리케이션에 생동감을 불어넣는 핵심 요소 중 하나입니다. 이러한 애니메이션을 구현하는 방법은 다양하지만, The GreenSock Animation Platform(GSAP)는 특히 프론트엔드 개발자와 디자이너들 사이에서 각광받고 있는 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.

GSAP의 가장 큰 장점은 CSS의 keyframes와 animations를 사용하는 것보다 더욱 정밀한 애니메이션 컨트롤을 가능하게 하며, 가볍고 사용하기 쉽다는 점으로, 복잡한 애니메이션 효과를 간단하게 구현할 수 있게 해, 개발 과정을 상당히 단순화시켜줍니다.

GSAP, showcases

또한, GSAP을 사용하면 CSS와 바닐라 자바스크립트만으로는 도달하기 어려운 세밀한 움직임과 동작의 연속성을 훨씬 쉽게 구현할 수 있습니다. 예를 들어, 스크롤링 기반의 애니메이션 또는 여러 요소가 차례로 움직이는 복잡한 시퀀스를 구현할 때, 속도, 가속도, 감속, 움직이는 경로 등을 자유롭게 설정할 수 있으며, GSAP의 다양한 Showcase에서 확인할 수 있는 바와 같이, 웹사이트나 애플리케이션에 놀라운 비주얼 효과를 더할 수 있습니다.

GSAP, showcases

GSAP이 제공하는 뛰어난 기능과 장점

GSAP의 사용이 많은 웹 개발자들에게 선호되는 이유는 다음과 같은 장점들로 요약됩니다.

  • 성능 및 부드러운 애니메이션: GSAP은 하드웨어 가속을 활용하여 탁월한 성능과 부드러운 애니메이션 경험을 제공합니다. 이는 웹사이트의 렌더링 성능을 최대화하여 사용자에게 매끄러운 인터랙션을 보장합니다.
  • 크로스 브라우징 지원: GSAP의 애니메이션은 거의 모든 주요 브라우저에서 일관된 경험을 제공합니다. 이로 인해 개발자는 브라우저 간 호환성 문제에 대해 덜 걱정하면서 프로젝트를 진행할 수 있습니다.
  • 강력한 애니메이션 기능: GSAP은 이동, 회전, 크기 조절과 같은 기본적인 애니메이션에서부터 복잡한 트윈, 트리거, 시퀀스 등의 고급 기능을 포함한 광범위한 애니메이션 효과를 구현할 수 있는 기능을 제공합니다.
  • 간편한 사용법: GSAP의 API는 사용하기 쉽고 직관적이며, 개발자가 빠르게 애니메이션을 작성하고 제어할 수 있도록 설계되어, 애니메이션의 구현 과정을 상당히 단순화시켜줍니다.
  • 풍부한 생태계와 지원: GSAP은 활발한 개발자 커뮤니티와 잘 문서화된 자료, 풍부한 온라인 튜토리얼, 다양한 플러그인을 보유하고 있어, 개발자가 필요한 기능을 쉽게 확장할 수 있습니다.
  • 재사용성과 유지보수의 용이성: GSAP을 사용하면 애니메이션 코드를 모듈화하여 재사용할 수 있고, 코드의 가독성이 뛰어나고 유지보수가 용이하여, 프로젝트의 생산성을 크게 향상시킵니다.
  • 다양한 요소에 대한 애니메이션 제어: GSAP은 DOM 요소 뿐만 아니라 CSS 속성, SVG, Canvas 등 다양한 형태의 요소를 애니메이션할 수 있어, 보다 범용적이고 유용한 라이브러리로 활용할 수 있습니다.

1. GSAP 시작하기

GSAP를 프로젝트에 도입하는 방법은 크게 두 가지가 있습니다. CDN을 사용하는 방법과 npm을 통한 설치 방법으로 각각에 대해 설명합니다.

CDN을 통한 GSAP 설정

CDN은 데이터를 사용자에게 더 빠르게 전송할 수 있도록 전 세계에 분산된 서버 네트워크를 활용합니다. GSAP와 같은 라이브러리를 CDN을 통해 사용하는 것은 몇 가지 장점이 있습니다.

  • 속도와 효율성: 사용자의 위치에 가장 가까운 서버에서 라이브러리를 로드하기 때문에 로딩 시간이 단축됩니다.
  • 간편한 설정: 별도의 설치 과정 없이 HTML 문서에 스크립트 태그를 추가하는 것만으로 GSAP 라이브러리를 사용할 수 있습니다.

GSAP를 CDN을 통해 사용하기 위해서는 다음과 같은 스크립트 태그를 HTML 문서의 <head> 태그나 <body> 태그 끝에 추가하기만 하면 됩니다.

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

npm을 통한 GSAP 설치 및 사용법

npm을 통한 설치는 모던 웹 개발 환경에서 매우 일반적인 접근 방식입니다. npm을 사용하면 프로젝트를 의존성으로 관리할 수 있으며, 버전 관리 및 업데이트가 용이합니다.

  • 프로젝트 내에서 관리: 프로젝트의 package.json 파일에 플러그인이 기록되어, 프로젝트와 함께 버전이 관리됩니다.
  • 모듈화된 사용: 필요한 기능만을 가져와 사용할 수 있어, 프로젝트의 크기와 로딩 시간을 최적화할 수 있습니다.

GSAP를 npm을 통해 설치하려면, 터미널 또는 명령 프롬프트에서 다음과 같은 명령어를 실행합니다.

npm install gsap

설치가 완료된 후, JavaScript 파일 내에서 GSAP를 다음과 같이 import하여 사용할 수 있습니다.

import gsap from 'gsap';
gsap.to('.yourElement', { duration: 1, x: 100 });

2. GSAP의 기본 애니메이션 메서드

1. gsap.to()

이 메서드는 움직임의 종착점을 지정하는 애니메이션을 생성합니다. gsap.to()는 애니메이션의 가장 기본이 되는 속성으로, 지정된 속성까지 객체를 애니메이션합니다.

// 예제: x축으로 300 이동하는데 2초가 걸리며, 시작 전 5초의 딜레이를 가짐
gsap.to('.box-1', {x: 300, duration: 2, delay: 5});

2. gsap.from()

시작점을 지정하는 애니메이션으로, gsap.from()은 초기 값을 설정하고 원래 상태로 되돌아오는 애니메이션을 실행합니다.

// 예제: x축에서 300의 위치에서 시작해 원래 위치로 2초에 걸쳐 이동, 시작 전 3초 딜레이
gsap.from('.box-1', {x: 300, duration: 2, delay: 3});

3. gsap.fromTo()

시작점과 끝점을 모두 지정하는 애니메이션으로, from 속성이 시작 값, to 속성이 종료 값으로 설정되어 애니메이션 효과가 적용됩니다.

// gsap.fromTo("타겟", {시작 속성: 시작 속성값}, {끝나는 속성: 끝나는 속성값});
gsap.fromTo(".box-1", {y: 50}, {duration: 2, x: 500, y: 0});

4. gsap.set()

애니메이션 효과 없이 즉시 요소의 속성 값을 변경합니다. 이 메서드는 초기 상태를 설정하거나 애니메이션 전에 특정 속성을 적용할 때 유용합니다. 여러개 속성에 동시에 설정이 가능하지만, 페이지 로딩 후 바로 보여야 하는 애니메이션의 경우에는 GSAP보다는 CSS에서 직접 설정하는 것이 좋습니다.

// 예제: .sc_intro 요소를 scale 0.8로 설정
gsap.set('.sc_intro', {scale: 0.8});
gsap.to(".sc_intro", {
    opacity: 0.5,
    scale: 1.5,
  },
});

5. gsap 컨트롤

.play(), .pause(), .resume(), .reverse(), .restart()는 특정 애니메이션의 재생, 일시 정지, 재개, 반전 및 재시작을 제어합니다. 이 메서드들은 애니메이션의 흐름을 세밀하게 조정할 수 있게 해줍니다.

const animation = gsap.to(".box", {x: 500, duration: 5, paused: true});

// Play 버튼
document.getElementById("play").addEventListener("click", function() {
  animation.play();
});

// Pause 버튼
document.getElementById("pause").addEventListener("click", function() {
  animation.pause();
});

// Resume 버튼
document.getElementById("resume").addEventListener("click", function() {
  animation.resume();
});

// Reverse 버튼
document.getElementById("reverse").addEventListener("click", function() {
  animation.reverse();
});

// Restart 버튼
document.getElementById("restart").addEventListener("click", function() {
  animation.restart();
});

6. gsap.timeline()

여러 애니메이션을 연속적으로 설정할 수 있습니다. timeline을 사용하면 복잡한 애니메이션 시퀀스를 쉽게 관리하고, 순차적 또는 동시 실행을 구현할 수 있습니다.

const timeline = gsap.timeline();
timeline.fromTo(".box-1", {y: 50}, {duration: 2, x: 500, y: 0})
  .to(".box-1", {duration: 2, x: 0, y: 0, delay: 1})
  .to(".box-1", {duration: 2, opacity: 0.5});

7. 간단한 텍스트 효과 예제

다음은 GSAP를 이용한 간단한 텍스트 효과 예제입니다.

<div id="text_ani">
  <div class="txt_wrap">
    <p class="txt">Simple</p>
    <p class="txt">Text</p>
    <p class="stroke">Animation</p>
    <p class="txt">Example</p>
  </div>
</div>
#text_ani .txt_wrap{display:flex;flex-direction:column;justify-content:center; align-items:flex-start;height:200vh;padding-left:30px;font-size:70px;font-weight:900;line-height:1.15;color:rgba(0,0,0,.2)}

#text_ani .txt_wrap p{position:relative;width:max-content;background:linear-gradient(to right, #000, #000) no-repeat;-webkit-background-clip:text;background-clip:text;background-size:0%;transition:background-size cubic-bezier(.1,.5,.5,1) 0.5s}
#text_ani .txt_wrap p.stroke{color:transparent;  -webkit-text-stroke:2px #000}

@media(max-width:1024px){
  #text_ani .txt_wrap{font-size:60px}
}

@media(max-width:768px){
  #text_ani .txt_wrap{font-size:44px}
}

@media(max-width:480px){
  #text_ani .txt_wrap{font-size:34px}
}
const textElements = gsap.utils.toArray('#text_ani .txt');
textElements.forEach(text => {
  gsap.to(text, {
    backgroundSize: '100%',
    ease: 'none',
    scrollTrigger: {
      trigger: text,
      start: 'center 80%',
      end: 'center 50%',
      scrub: true,
    },
  });
});

ScrollTrigger로 애니메이션의 정확한 타이밍 잡기

웹 애니메이션은 사용자의 경험을 풍부하게 하고 웹사이트의 동적인 요소를 강화합니다. GSAP는 이를 위한 강력한 도구를 제공하며, 애니메이션이 사용자에게 정확한 시점에 표시되는 것이 중요합니다. 여기에서는 GSAP의 ScrollTrigger를 활용하여 스크롤에 따라 애니메이션을 정확히 제어하는 방법에 대해 설명합니다.

스크롤 위치에 따른 애니메이션 효과 적용

스크롤 위치에 따라 애니메이션을 적용하는 것은 웹사이트에 동적인 요소를 추가하는 훌륭한 방법입니다. ScrollTrigger는 GSAP과 함께 사용되어, 사용자가 페이지를 스크롤할 때 정확한 위치에서 애니메이션이 시작되도록 합니다.

스크롤 이벤트를 사용하기 위해선 상단에 gsap.registerPlugin(ScrollTrigger);로 스크롤 트리거 플러그인을 불러오고 gsap 애니메이션 내부에 scrollTrigger 속성을 추가하여 애니메이션 효과를 줄 요소를 등록해주어야 합니다.

1. 기본 사용법: 단발성 애니메이션

단발성 애니메이션은 사용자가 특정 요소에 도달했을 때 한 번만 실행되는 애니메이션입니다.

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box1", {
  scrollTrigger: ".box1", // 애니메이션 대상 요소
  x: 400,
  duration: 2
});

2. 토글 액션: 반복 애니메이션

토글 액션은 스크롤 위치에 따라 애니메이션이 반복되게 하는 기능입니다.

gsap.to(".box1", {
  scrollTrigger: {
    trigger: ".box1",
    toggleActions: "restart none reverse none"
  },
  x: 400, 
  duration: 2
});

toggleActions은 애니메이션의 시작, 끝, 다시 시작 등의 동작을 정의합니다. 각 상황에서 어떤 행동을 취할지 결정할 수 있습니다. toggleActions은 onEnter, onLeave, onEnterBack, onLeaveBack 네 가지로 구성됩니다.

  • onEnter: 이벤트 발생 위치에 도달
  • onLeave: 이벤트 발생 위치를 떠남
  • onEnterBack: 스크롤을 다시 올려 이벤트 발생 위치에 도달
  • onLeaveBack: 스크롤을 다시 올려 이벤트 발생 위치를 떠남

예제 보기: https://codepen.io/lpla/pen/YzpaQmY

3. 시작/종료 지점 선택

애니메이션의 시작과 종료 지점을 명확히 설정할 수 있습니다. 이는 애니메이션이 시작되거나 종료되는 시점을 더욱 세밀하게 조정할 수 있게 해줍니다.

gsap.to(".box2", {
  scrollTrigger: {
    trigger: ".box2",
    start: "top center",
    markers: true,
    toggleActions: "resume pause reset pause"
  },
  x: 400, duration: 4,
});

요소의 하단에서 start 하고 싶다면 start: "bottom center"로 바꾸면 되고, 종료 지점 역시 마찬가지로 start 대신 end를 사용하면 됩니다.

4. Scrub: 애니메이션 되감기

Scrub 기능은 사용자가 스크롤을 올릴 때 애니메이션을 되돌릴 수 있게 합니다. 이는 애니메이션을 더욱 인터랙티브하게 만들어 줍니다.

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    scrub: true
  },
  x: 400
});

예제 보기: https://codepen.io/lpla/pen/LYbdjvJ

5. Pinning: 요소 고정

Pinning은 스크롤 동안 특정 요소를 화면에 고정시키는 기능입니다. 이를 통해 사용자의 주의를 끌거나 중요한 정보를 강조할 수 있습니다. 사용법은 pin: true 또는 pin: "Class/ID"입니다.

ScrollTrigger.create({
  trigger: ".box",
  start: "top top",
  pin: true,
  pinSpacing: false
});

예제 보기: https://codepen.io/lpla/pen/XWNEoRN

예제 보기: https://codepen.io/lpla/pen/qBqoLpV

예제 보기: https://codepen.io/lpla/pen/abBYXzY

6. Spinning: 수평 이동

Spinning은 스크롤 시 화면이 수직이 아닌 수평으로 이동하는 기능을 말하며, pin, scrub, snap 모두 쓰이고, ease: "none"도 추가해주어야 사용할 수 있습니다.

gsap.registerPlugin(ScrollTrigger);

gsap.to(".horizontal-section", {
  x: () => -(document.querySelector(".horizontal-section").scrollWidth - document.documentElement.clientWidth) + "px",
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-wrapper",
    pin: true,
    scrub: 1,
    end: () => "+=" + document.querySelector(".horizontal-section").scrollWidth
  }
});

예제 보기: https://codepen.io/lpla/pen/qBqoLpV

답글 남기기