gsap 배경고정 스크롤 텍스트 엔딩레효과

최하림·2022년 5월 17일
2

gsap

목록 보기
2/2

배경을 고정시키고 스크롤을하면 텍스트를 위로 올라가면서 사라지는 방식.

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 로 계속 이으면 하나가끝나면 하나가 실행된다.

profile
노력하는 성장형

0개의 댓글