gsap scrollTrigger

📍 scrollTrigger 사용 방법 3가지

1. timeline 안에서 쓰는 것
2. gsap 태그 안에서 쓰는 것
3. 그냥 trigger만 만들어서 쓰는 것

📍 gsap 태그 안에서 사용하기

//트리거 기준 0% //윈도우 기준 0% 만나면 실행
//보통 앞의 것은 각각 0%, 100% 설정해두고, 뒤의 것을 조정해준다.
start: "0% 0%",
end: "100% 0"

📍 each문으로 태그 개수만큼 실행시키기

$('.box').each(function(i,el){
})

📍 강제로 scrollTrigger만 만들기1

• ScrollTrigger.create({})
• trigger 요소로 data 잡기 : '[data-bg="red"]'
• toggleClass : {targets: "header", className: "on"}

📍 강제로 scrollTrigger만 만들기2 - each문으로 돌리기

• $('[data-bg="red"]').each(function(i,el){})
• ScrollTrigger.create({})
• toggleClass : {targets: "header", className: "on"}