포지션 파라미터

타임라인 타이밍 미세 조절: 포지션 파라미터

타임라인(Timeline)의 기본 동작은 "앞선 애니메이션이 완전히 끝난 후 다음 애니메이션이 실행"되는 것입니다.
하지만 때로는 이전 애니메이션이 끝나기 직전에 자연스럽게 겹쳐서 렌더링되거나, 정확히 동시에 여러 개가 출발해야 할 때가 있습니다. 이때 사용하는 것이 타임라인의 강력한 무기인 포지션 파라미터(Position Parameter)입니다.

[그림 1] 포지션 파라미터에 따른 타임라인 오프셋 메타포

1. 포지션 파라미터 기호 한눈에 보기

가장 자주 쓰이는 4가지 기호의 시각적인 차이를 확인해보세요.

2. 파라미터 문법 정리

포지션 파라미터는 to(), from(), fromTo() 메서드의 마지막 인자로 전달됩니다.

파라미터	동작 원리 및 설명
`(생략) 또는 ">"`	기본 상태. 바로 앞 애니메이션이 완전히 끝나는 즉시 실행됩니다.
`"<"`	동시 실행. 가장 최근에 추가된 애니메이션의 시작점에 맞추어 같이 출발합니다.
`"-=초"`	겹치기 (Overlap). 앞 애니메이션이 끝나기 지정된 초(Second) 만큼 전에 먼저 출발합니다. (예: `"-=0.5"`)
`"+=초"`	지연 (Gap). 앞 애니메이션이 끝난 후 지정된 초 만큼 기다렸다가 출발합니다. (예: `"+=1"`)
`절대값 (예: 2)`	문자열이 아닌 단순 숫자를 넣으면, 타임라인이 시작된 지 정확히 해당 초(Second) 지점에서 실행됩니다.

💡 팁: 절대값보다는 상대값을 권장합니다.

숫자 2처럼 절대 시간을 입력하면 유지보수가 어려워집니다. 중간에 다른 애니메이션이 추가되거나 길이가 변경되어도 유연하게 대응하려면 "-=0.5"나 "<" 같은 상대적인 위치 기호를 사용하는 것이 타임라인의 장점을 극대화하는 길입니다.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <div class="demo-wrapper"> <button id="playBtn" class="play-btn">▶ 시퀀스 재생</button> <div class="track"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> <div class="item item4">Item 4</div> </div> </div>

파라미터

동작 원리 및 설명

(생략) 또는 ">"

기본 상태. 바로 앞 애니메이션이 완전히 끝나는 즉시 실행됩니다.

"<"

동시 실행. 가장 최근에 추가된 애니메이션의 시작점에 맞추어 같이 출발합니다.

"-=초"

겹치기 (Overlap). 앞 애니메이션이 끝나기 지정된 초(Second) 만큼 전에 먼저 출발합니다. (예: "-=0.5")

"+=초"

지연 (Gap). 앞 애니메이션이 끝난 후 지정된 초 만큼 기다렸다가 출발합니다. (예: "+=1")

절대값 (예: 2)

문자열이 아닌 단순 숫자를 넣으면, 타임라인이 시작된 지 정확히 해당 초(Second) 지점에서 실행됩니다.