[js]gsap 각종 속성

scrollTrigger 프로퍼티(속성)

animation 

trigger

endTrigger 

// end값의 기준이 되는 el

// 지정 하지않을 경우 trigger가 기준

horizontal 수평 스크롤 사용 여부

pin

markers

scrub

snap

start

end

stagger

// 지정한 el를 지정 시간 내에 순차적으로 혹은 동일한 시간 간격을 두고 실행

- from : start / center / edges / random / end

// 시작 el 설정

- amount : number

trigger

const tl = gsap.timeline({
  scrollTrigger:{
    trigger:".cont2",
    pin: true,
    // end값으로 지정해준 만큼 padding-bottom이 늘어남. sticky와 비슷
    start:"top top",
    // end: "+=3000"
	  // .cont2의 css 값이 1000px일 경우 해당 script로 인해 토탈 높이는 4000px이 됨
    // end 미설정 시 트랜지션 되는 동안 스크롤이 내려갈수있음
    // 
  }
}); 
const box = document.querySelectorAll("li")
tl.to(box, 1,{
  // transition-duration, default: 1
  x : 0,
  duration : 1,
  stagger: {
    each: 0.2,
    // stagger:1, each: 1과 동일
    // 애니메이션 종료 후 다음 애니메이션은 5초 후에 종료됨
    // duration : 1초, each 5초 > 4초 딜레이 후 1초간 애니메이션 실행
    // amount : 4,
    // amount가 지정된 시간 내에 모두 실행됨
    from: "center"
    // start, end, center
  },
  // li가 3개일 경우 stagger 미지정 시, 한번에 나타남
	// stagger: n일 경우, li가 순차적으로 n초의 딜레이를 가짐
  opacity: 1
},{})

pin : "el"

// end값으로 지정해준 만큼 padding-bottom이 늘어남

// sticky와 비슷

stagger : number

// li가 3개일 경우 stagger 미지정 시, 한번에 나타남

// stagger: n일 경우, li가 순차적으로 n초의 딜레이를 가짐

 

.cont2의 css 값이 1000px일 경우 해당 script로 인해 토탈 높이는 4000px이 됨