gsap.timeline()

timeline메서드를 활용하여 각 target에 timeline부여

 

let tl = gsap.timeline();

//total duration: 
tl
  .to(".one",{duration:2,x:500})
  //2초 동안 x축으로 500px
  
  .to(".two",{duration:3,x:500},1)
  // 1초 후 3초동안 x축으로 500px(1은 absolute값)
  
  .to(".three",{duration:1,x:500},"<")
  //1초 후 1초동안 x축으로 500px(<은 이전 target의 timeline을 따라감)
  
  .to(".four",{duration:1,x:500},"<0.5")
  //1.5초후 1초동은 x축으로 500px(<0.5를 추가하면 이전 target보다 0.5초 뒤 실행)

 

 

*해당코드

https://codepen.io/fangmin/pen/BaWReJq

 

gsap timeline

 

 

*참고영상:

https://www.youtube.com/watch?v=VkptNYadKR0&list=PLSkIx8U0TMvgH2PEokYLIxofdb1L9cJjz&index=13