GSAP(GreenSock Animation Platform)은 JavaScript로 웹 애니메이션을 쉽게 구현할 수 있는 라이브러리입니다. GSAP의 중요한 기능 중 하나는 타임라인(Timeline)입니다. 타임라인은 일련의 애니메이션 작업을 순차적으로 제어하고 관리할 수 있는 기능을 제공합니다.

타임라인(Timeline) 개념

타임라인은 GSAP에서 애니메이션을 관리하는 컨테이너 역할을 합니다. 여러 개의 애니메이션을 순차적으로 실행하거나 동시에 실행하고 싶을 때 유용합니다. 타임라인을 사용하면 애니메이션의 시작 시간, 지속 시간, 반복 등을 세밀하게 제어할 수 있습니다.

타임라인(Timeline) 사용법

GSAP에서 타임라인을 생성하고 애니메이션을 추가하는 방법은 간단합니다. 먼저, 타임라인을 생성하고 변수에 할당합니다.

var tl = gsap.timeline();

다음으로, 타임라인에 애니메이션을 추가합니다. to() 메소드를 사용하여 요소를 애니메이션화합니다. 해당 요소를 첫 번째 인자로 지정하고 애니메이션 효과를 정의하는 객체를 두 번째 인자로 전달합니다.

tl.to('.element', { duration: 1, x: 100 });

애니메이션의 시작 시간을 지정하려면 delay 속성을 사용합니다.

tl.to('.element', { duration: 1, x: 100, delay: 2 });

애니메이션의 반복 횟수를 설정하려면 repeat 속성을 사용합니다.

tl.to('.element', { duration: 1, x: 100, repeat: 3 });

타임라인에 여러 개의 애니메이션을 추가할 수 있고, 각 애니메이션의 시작 시간과 속성을 다양하게 지정할 수 있습니다. 이렇게 구성된 타임라인은 play() 메소드로 실행할 수 있습니다.

tl.play();

타임라인의 애니메이션을 일시정지하려면 pause() 메소드를 사용합니다.

tl.pause();

결론

GSAP의 타임라인은 웹 애니메이션을 제어하고 관리하는 강력한 기능을 제공합니다. 타임라인을 사용하면 복잡한 애니메이션 시퀀스를 쉽게 구현할 수 있고, 시작 시간, 지속 시간, 반복 등을 세밀하게 제어할 수 있습니다. GSAP 공식 문서에서 더 많은 정보를 확인하고 다양한 예제를 참고할 수 있습니다.