배경을 고정시키고 스크롤을하면 텍스트를 위로 올라가면서 사라지는 방식.
let tc = gsap.timeline({
scrollTrigger: {
trigger:".box_c",
start:"bottom bottom", //트리거 객체의 시작위치.
end:"+=4000",
scrub:true,
pin:".box_c" // 배경 고정
}
})
tc.to(".text_c",{
y:-1100,
ease:"none",
Opacity:0,
duration:4
})
.to(".text_d",{
y:-1100,
ease:"none",
Opacity:0,
duration:4
})
.to(".text_e",{
y:-1100,
ease:"none",
Opacity:0,
duration:4
})
.to(".text_f",{
y:-1100,
ease:"none",
Opacity:0,
duration:4
})
tc로 스크롤트리거 효과및 지점을 결정하고
tc.to 후 뒤에 .to 로 계속 이으면 하나가끝나면 하나가 실행된다.