GSAP - timeline

원래라면 보통 애니메이션에서 다음 애니메이션을 자연스럽게 나타나게 하려면
앞의 애니메이션이 실행시간이 끝난뒤 실행되게 별도로 delay값을 넣어 주어야하지만

gsap는 이런것을 알아서 쉽게 해주는 timeline이라는 기능이 존재한다

1. 기본 사용법

• 위에 부터 아래로 순서대로의 timeline을 가지게되고 코드 순서대로 실행됨.

const tl = gsap.timeline();

tl.to("#star", {duration:1, x:10, y:10})
tl.to("#circle", {duration:1, x:10, y:10})

//
tl
	.to("#star", {duration:1, x:10, y:10})
	.to("#circle", {duration:1, x:10, y:10})

2. Position Parameter

• 포지션은 두가지로 나뉜다.
  realative, absolute
• realative는 앞의 애니메이션의 상대적으로 작용.
• absolute는 전체절대적인 애니메이션 시간대에 원하는시간에 재생을 시킬 수 있음

 const tl = gsap.timeline();
  tl.to(object, {y:300}, "+=1")  // 이전 트윈 종료 후 1초 뒤에 시작
  tl.to(object, {x:300}, "-=1")  // 이전 트윈 종료 1초 전에 시작
  tl.to(object, {rotation:90}, "<")  // 이전 트윈 시작될 때 동시에 실행
  tl.to(object, {opacity:0.5}, "<1") // 이전 트윈 시작 된 후 1초 뒤에 실행
  tl.to(object2, {x:200}, 1) // abosulte postion, 타임라인 1초에 실행