-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
ScrollTrigger의 animation에 함수호출
23.11.07 11:34 작성 23.11.07 11:35 수정 조회수 179
1
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으로 내려오는데 제가 뭘 잘못했을까요...ㅜㅜ
고민고민하고 이리저리 뜯어보다 질문드립니다.
답변을 작성해보세요.
2
범쌤
지식공유자2023.11.07
안녕하세요 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)
파트에서 확인해보실 수 있습니다.
감사합니다 :)
답변 1