GSAP

GSAP(GreenSock Animation Platform)은 웹 애니메이션을 만들기 위한 강력하고 유연한 JavaScript 라이브러리입니다. GSAP은 HTML, CSS, SVG, Canvas 등의 다양한 웹 기술을 지원하며, 간단한 트윈(tween)부터 복잡한 시나리오의 애니메이션까지 다양한 기능을 제공합니다.

GSAP의 핵심 기능은 다음과 같습니다:

1. 간단한 트윈(Tween): GSAP은 요소의 속성을 부드럽게 변경하는 트윈 기능을 제공합니다. 예를 들어, 요소의 위치, 크기, 색상 등을 부드럽게 변경할 수 있습니다.

// 예제: 요소의 위치를 변경하는 트윈
gsap.to('.box', { x: 200, duration: 1 });

2. 타임라인(Timeline): 여러 개의 트윈을 순서대로 실행하거나 병렬로 실행할 수 있는 타임라인을 제공합니다. 이를 통해 정교한 애니메이션 시나리오를 작성할 수 있습니다.

// 예제: 타임라인에 여러 개의 트윈 추가
const tl = gsap.timeline();
tl.to('.box1', { x: 200, duration: 1 })
  .to('.box2', { y: 150, duration: 0.5 }, '-=0.5'); 
  // '-=0.5'는 앞선 트윈보다 0.5초 빠르게 실행

3. 이징(Easing): 다양한 이징 함수를 제공하여 애니메이션의 속도를 조절할 수 있습니다. 가속, 감속, 탄성 등을 적용할 수 있습니다.

// 예제: 이징을 적용한 트윈
gsap.to('.box', { x: 200, duration: 1, ease: 'power2.inOut' });

4. 스크롤 트리거(ScrollTrigger): 스크롤 위치에 따라 특정 애니메이션을 실행하거나 제어할 수 있는 스크롤 트리거 기능을 제공합니다.

// 예제: 스크롤 위치에 따라 트윈 실행
gsap.to('.box', {
  x: 200,
  duration: 1,
  scrollTrigger: {
    trigger: '.box',
    start: 'top center', // 트리거가 화면 중앙에 오면 시작
    end: 'bottom center', // 트리거가 화면 중앙에서 벗어나면 종료
    markers: true, // 디버깅을 위한 표시 (옵션)
  },
});

GSAP은 웹 개발자들 사이에서 널리 사용되며, 자세한 내용과 예제는 GSAP 공식 문서에서 확인할 수 있습니다.
https://gsap.com/docs/v3/