01.gsap.method

2026년 01월 07일

01.gsap.method

개요

gsap(GreenSock Animation Platform)은 웹 애니메이션 구현에 널리 쓰이는 라이브러리로, 다양한 메서드를 통해 세밀한 애니메이션 제어가 가능하다. 이 글에서는 gsap에서 자주 사용하는 기본 메서드들의 역할과 사용법을 집중적으로 다룬다. 각 메서드는 애니메이션 생성, 제어, 시간 관리 등 핵심 기능과 직결된다. 해당 내용은 gsap 활용의 기초를 이루며, 관련된 다른 주제와도 연계된다.

핵심 개념

gsap의 주요 메서드는 크게 다음과 같은 분류로 이해할 수 있다.

gsap.to(): 대상 요소를 특정 상태로 변화시키는 트윈 애니메이션 생성 메서드다. 예를 들어 위치, 크기, 색상 등의 CSS 속성을 목표 값으로 애니메이션할 때 사용한다.
gsap.from(): 애니메이션 시작 상태를 정의하여 지정된 값에서 현재 상태로 변화시키는 메서드다.
gsap.fromTo(): 시작과 끝 상태를 모두 지정해서 애니메이션을 정확하게 제어할 때 쓴다.
gsap.set(): 애니메이션 효과 없이 바로 속성을 지정하는 데 사용된다.
gsap.delayedCall(): 일정 시간이 지난 후 특정 콜백 함수 실행을 예약한다.
gsap.killTweensOf(): 특정 대상의 모든 트윈 애니메이션을 즉시 종료한다.

이들 메서드의 공통점은 모두 gsap 네임스페이스를 통해 호출되며, 대상 요소와 애니메이션 속성, 옵션들을 인자로 받는다는 점이다. 각 메서드가 반환하는 Tween 인스턴스를 활용한 추가 제어도 가능하다.

구현 단계

gsap 라이브러리 로드: 프로젝트에 gsap을 설치하거나 CDN으로 불러온다.
애니메이션 대상 선택: DOM 요소를 선택하거나 JavaScript 객체를 지정한다.
적절한 gsap 메서드 호출: 변화시키고자 하는 속성 및 옵션을 명시하여 to, from, fromTo 등의 메서드를 사용한다.
애니메이션 실행 및 제어: 생성된 Tween 객체를 통해 재생, 정지, 재시작 등 동작 제어가 가능하다.

gsap.to()

gsap.to() 메서드는 가장 기본적인 애니메이션 생성 방법으로, 대상 요소의 현재 상태에서 특정 속성 값을 목표로 점진적으로 변화시킨다. 입력으로는 대상 요소와 변화를 정의한 객체가 필요하다. 아래 예시에서는 박스 요소의 투명도와 위치를 변경하는 과정을 보여준다.

import gsap from "gsap";

const box = document.querySelector(".box");
const button = document.getElementById("animate");

if (button && box) {
  button.addEventListener("click", () => {
    gsap.to(box, { duration: 1, x: 100, opacity: 0.5, ease: "power2.out" });
  });
}

Open Sandbox

이 방식은 특정 상태로 부드럽게 이동하는 데 적합하다. duration 옵션으로 애니메이션 지속시간을 조절하며, x, y 좌표, opacity 같은 CSS 속성 값을 포함시킬 수 있다. 이 메서드는 01.gsap.method에서 설명하는 기본 사용법의 핵심이다.

gsap.from()

gsap.from() 메서드는 반대로 시작 상태를 정의하여 현재 상태로 변화를 유도한다. 따라서 화면에 요소가 있으면 애니메이션을 통해 나타나는 효과를 만들 때 활용된다. 다음은 박스가 원래 위치에서 왼쪽으로 이동한 상태에서 시작해 원래 위치로 돌아오는 예시 코드이다.

import gsap from "gsap";

const box = document.querySelector(".box");
const button = document.getElementById("animate");

if (button && box) {
  button.addEventListener("click", () => {
    gsap.from(box, { duration: 1, x: -100, opacity: 0 });
  });
}

Open Sandbox

초기 위치와 불투명도를 지정해 화면에 자연스럽게 등장하는 애니메이션 효과를 간단히 구현할 수 있다. 이 방법은 요소가 동적으로 나타날 때 흔히 사용된다. 01.gsap.method에서 더 다양한 메서드 조합법을 확인 가능하다.

gsap.fromTo()

gsap.fromTo() 메서드는 시작과 끝 상태를 명확히 지정해야 할 때 활용된다. 이 메서드는 from과 to를 조합한 형태로, 애니메이션의 시작과 종료 속성을 독립적으로 설정 가능한 점이 특징이다. 예를 들어, 불투명도를 0에서 1로, x좌표를 -100에서 200까지 변화시키는 코드는 다음과 같다.

import gsap from "gsap";

const box = document.querySelector(".box");
const button = document.getElementById("animate");

if (button && box) {
  button.addEventListener("click", () => {
    gsap.fromTo(box,
      { x: -100, opacity: 0 },
      { duration: 1, x: 200, opacity: 1 }
    );
  });
}

Open Sandbox

출발 상태와 목표 상태가 명확해 예상 가능한 애니메이션 흐름을 설정할 때 매우 유용하며, 조건별 상태 전환에 적합하다. 이와 관련한 추가 메서드는 01.gsap.method 경로에서 참고 가능하다.

참고 자료

GreenSock 공식 문서: https://greensock.com/docs/
gsap 메서드 정리: https://greensock.com/docs/v3/GSAP/gsap.to
애니메이션 기초: 01.gsap.method