[GSAP] timeline과 addLabel

timeline을 사용할 때 애니메이션을 함께 시작하고 싶을 때 addLabel로 간편하게 구현할수 있다!

✔️ 코드

const ani1 = gsap.timeline({scrollTrigger: {
    defaults:{
        ease:'none'
    },
    trigger: ".box1",
    start: "0% top",
    end: "100% 150%",
    scrub: true,
}});

ani1
   .addLabel('a')
   .to(".box1 .desc01",{y:-50, opacity:1},'a')
   .to(".box1 .desc02",{y:150, opacity:0.5},'a')

   .addLabel('b')
   .to(".box1 .desc03", {opacity:0},'b')
   .to(".box1 .desc03",{y:-50, opacity:1},'b')

   .addLabel('c')
   .to(".box1 img", {opacity:1},'c')
   .to(".box1 img", {scale:0.78},'c')   
   .to(".box1 video", {opacity:1, scale:1},'c')

이런식으로 addLabel메서드를 추가하여 그룹으로 묶어 실행시킬 수 있다.

• a그룹 -> b그룸 -> c그룹 순서로 애니메이션 진행
• 'a+5', 'b-=0.5'등 디테일한 시간 설정도 가능!