ScrollTrigger의 animation에 함수호출

Question

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으로 내려오는데 제가 뭘 잘못했을까요...ㅜㅜ 고민고민하고 이리저리 뜯어보다 질문드립니다.

kindtiger · Answer

안녕하세요 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) 파트에서 확인해보실 수 있습니다.   감사합니다 :)