타임라인 타이밍 미세 조절: 포지션 파라미터 (Position Parameter)
⏳ 애니메이션 겹치기와 타이밍 조절
타임라인 체이닝을 사용할 때, 이전 애니메이션이 끝나기 전에 다음 애니메이션을 시작하게 하거나 동시에 실행하고 싶다면 포지션 파라미터(Position Parameter)를 사용합니다.
"<": 이전 애니메이션과 동시에 시작">": 이전 애니메이션이 끝난 직후 (기본값과 동일)"+=1": 이전 애니메이션이 끝난 후 1초 뒤에 시작"-=0.5": 이전 애니메이션이 끝나기 0.5초 전에 겹쳐서 시작
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<style>
.item { width: 100px; height: 40px; background: #14b8a6; margin: 5px; }
</style>
<div class="item i1">Item 1</div>
<div class="item i2">Item 2</div>
<div class="item i3">Item 3</div>
<script>
const tl = gsap.timeline();
tl.to('.i1', { x: 200, duration: 1 })
// i1이 끝나기 0.5초 전에 i2 시작 (겹침)
.to('.i2', { x: 200, duration: 1 }, "-=0.5")
// i2와 정확히 동시에 i3 시작
.to('.i3', { x: 200, duration: 1 }, "<");
</script>