ScrollTrigger의 animation에 함수호출

웹 애니메이션을 위한 GSAP 가이드 Part.03

해결된 질문

작성

335

수정됨

 function rotation_text(){  
  const tl = gsap.timeline({defaults:{duration:2}})

 tl
.to('.container6>.textbox',{
 rotation:720
})
.to('.container6>.textbox',{
 scale:5
})
// .to('.container6>.textbox',{
//  opacity:0
// })
}

ScrollTrigger.create({
 trigger:'.container6',
 start:'top', 
 end:'+=2000',
 scrub:1,
 pin:true,
 markers:true,
 animation:rotation_text()
})

안녕하세요 선생님 좋은 강의 항상 감사하면서 공부하고 있습니다.
다름이 아니라 위 코드처럼 타임라인을 함수로 등록하여 사용하고 싶은데요..

위의 코드를 실행하면 스크롤트리거에 걸리지 않고 이미 함수가 실행되어 container6으로 내려오는데 제가 뭘 잘못했을까요...ㅜㅜ
고민고민하고 이리저리 뜯어보다 질문드립니다.

javascript 애니메이션 인터랙티브-웹

답변 1

범쌤

지식공유자

안녕하세요 leo님 😀

애니메이션을 분리하여 함수로 관리하는 방법은 정말 좋은 접근입니다 👍

하지만 저렇게 타임라인만 함수안에 넣고 함수를 실행한다면

자바스크립트는 함수의 실행코드를 보는 즉시 함수를 실행 (애니메이션 재생) 해 버리기 때문에 원하는 애니메이션을 제어할 수 없습니다.

타임라인을 함수 안에 넣고 밖에서 제어하고 싶다면 꼭 함수 안에서 타임라인을 리턴해 주셔야 밖에서 사용이 가능합니다.

 function rotation_text(){  
  const tl = gsap.timeline({defaults:{duration:2}})

 tl
.to('.container6>.textbox',{
 rotation:720
})
.to('.container6>.textbox',{
 scale:5
})

 return tl
}

이렇게 작성하면 rotation_text 함수를 실행하면 타임라인 애니메이션이 반환되어 그대로 스크롤 트리거가 이어받아 애니메이션을 제어할 수 있습니다.

해당 내용에 대한 자세한 설명은

part02. Advanced timelile - particle(1)

파트에서 확인해보실 수 있습니다.

감사합니다 :)

leo

질문자

앗!!! 정말 감사합니다!!

인프런 커뮤니티 질문&답변

ScrollTrigger의 animation에 함수호출