[#TIL] GSAP

GSAP 세팅

https://greensock.com/get-started/

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

일반 작업

gsap.to : ~에게
gsap.from : ~부터
gsap.fromTo : ~부터~에게

gsap.to('.box',{x:100})
: 후 값을 세팅(x축으로 0 -> +100)

gsap.from('.box',{x:100,opacity:0})
: 전 값을 세팅(x축이 100 -> 0, opacity가 0 -> 1)

gsap.fromTo('.box',{x:100},{x:50})
: 전 값에서 후 값으로 세팅(x축이 100 -> 50)

gsap.to('.box',{
             duration:1,
             x:100, //후 값을 세팅(x축으로 0 -> +100)
             stagger:{ //stagger는 순차적으로 이동하고 싶을 때 사용
                 from:'end', //끝에서부터 실행
                 amount: 0.1, //0.1초 동안 실행
             }
         })

여러 개를 순차적으로 동작을 부여하고 싶을 때(timeline 사용)

motion = gsap.timeline({ //여러 개를 순차적으로 동작을 부여하고 싶을 때, 시간 순서 부여.
          defaults:{
        	opacity:0.5
            },
            paused:true,
        })

motion
  .to('.box1',{x:100}) // 1.
  .addLabel('a') // 라벨을 부여해서 같이 실행하게 할 수 있음.
  .to('.box2',{x:200},'a') // 2.
  .to('.box3',{scale:2},'a') // 2.
        
$('#play').click(function(){
  motion.play();
})
$('#pause').click(function(){
  motion.pause();
})
$('#restart').click(function(){
  motion.restart();
})
$('#reverse').click(function(){
  motion.reverse();
})

스크롤 동작 (scrollTrigger 사용)

gsap.to('.here h1',{

scrollTrigger:{ //스크롤트리거 사용
    trigger:".here", //trigger 기준에서 할꺼다.
    start:"0% 0%", //[트리거기준,윈도우] 만나야 실행
    end:"100% 0%", //[트리거기준,윈도우] 만나야끝
    markers:true, //표시자
    scrub:1, //다회성 
    pin:'.here img' //특정 위치에 고정 지정
  },
  scale:3,
  rotation:1000,
})

반복문 사용 (forEach 사용)

el = document.querySelectorAll('.box'); //박스 전체를 배열 상태로 찾음

el.forEach(element => { el = array(배열로 되어진), for (반복문) 
	console.log(element);
});

gsap.utils.toArray('.box').forEach(element=>{ //GSAP에 배열 기능 toArray를 이용해서 .box를 배열로 만듦, element로 지정.
gsap.to(element.children[0],{ //각각 따로 선택
  scrollTrigger:{
    trigger:element,
    start:"0% 0%", //[트리거기준,윈도우] 만나야실행
    end:"100% 0%", //[트리거기준,윈도우] 만나야끝
    markers:true,
    scrub:1,
  },
  scale:3,
  rotation:1000,
  })
})

//Jquery 사용
$('.box').each(function(a,b){
y = $(this).find('h1').data('y'); //h1 data를 설정
  gsap.from($(this).find('h1'),{
    scrollTrigger:{
      trigger:b, //element b
      start:"0% 0%", //[트리거기준,윈도우] 만나야실행
      end:"100% 0%", //[트리거기준,윈도우] 만나야끝
      markers:true,
      scrub:1,
    },
    y:y, //y축이 이동한다.
    scale:2, //먼저 크게.
    opacity:0, //먼저 투명하게.
  })
})

ScrollTrigger ()

ScrollTrigger.create({
  trigger:".here", //.here이란 기점만 만듦
  start:"0% 0%",
  end:"100% 0%",
  markers:true,
  //toggleClass:"active" //class를 넣었다 뺏다가능.
  onEnter:()=>{
  	console.log('도달');
  },
  onLeave:()=>{
  	console.log('빠짐');
  },
  onEnterBack:()=>{ //그 도형을 다시 백해서 들어감
  	console.log('onEnterBack');
  },
  onLeaveBack:()=>{
  	console.log('onLeaveBack'); //그 도형에서 위로 완전 나갈 경우
  },
  //toggleActions:"play reset play resume"
  toggleClass: {targets: "body", className: "black"}
  })
  
  
 //data 이용
 $('[data-background]').each(function(a,b){
    
ScrollTrigger.create({
    trigger:b,
    start:"0% 0%",
    end:"100% 0%",
    markers:true,
    // toggleClass:"active"
    toggleClass: {targets: "body", className: "black"}
  })
})

match media ()

ScrollTrigger.matchMedia({
// large
"(min-width: 1025px)": function() {
},
// medium
"(min-width: 768px) and (max-width: 1024px)": function() {
},
// small
"(max-width: 767px)": function() {
	gsap.to('.here h1',{
      scrollTrigger:{
        trigger:'.here',
        start:"0% 0%",
        end:"100% 0%",
        markers:true,
      },
  	  scale:10
  	})
},
// all
"all": function() {
	}
});