GSAP TOOLS

gsap tools 
-tweenlite 
-tweenmax
-timelinelite
-timelinemax
-plugins

---

tweenlite 

cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>

*autoAlpha:0 === opacity: 0; + visibility: hidden;

tweenlite의 basic method 4가지 

1. to // 이 vars안에 들어가는거는 내가 주고싶은 효과를 작성하면 됨 

TweenLite.to(square1, 5, 
           { backgroundColor: '#ffea00',
            y: 200,
            autoAlpha: 0,
            delay: 3 }); 

=> square1이라는 변수가 5초간 애니메이션이 들어가는데 
그 애니메이션효과가 배경색이 #ffea00으로 바뀌고 
세로로 200픽셀 이동하면서 투명하게 사라지는 효과이고 3초후에 이 애니메이션이 실행된다 

2. set // duration없이 처음부터 효과를 주고 시작하는것 
3. from // to의 반대, 위의 코드를 예로 들면 박스가 세로 200px에서 제자리로 돌아오는거 
4. fromTo // 시작, 끝을 정해놓고 애니메이션 효과주는거 

TweenLite.fromTo(square1, 5, 
           { backgroundColor: '#ffea00',
            y: -200,
            autoAlpha: 0 },  //시작
           { backgroundColor: '#ff1493',
            y: 0,
            autoAlpha: 1 }); //끝
=>200픽셀위에서 박스가 떨어짐 

vars 속성 

1. ease //효과 ex)파워
2. onStart //애니메이션 시작하기전에 뭔가를 작동시키고싶을때 변수에 담아두고 불러주면됨 onComplete도있음
3. dynamic values // 세로값을 랜덤하게 줄수있음 
y: function(){
 return Math.random() * 300; },
ease: Power2.easeIn
});

---

tweenmax 

cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

트윈맥스는 트윈라이트보다 13개의 추가 메소드가 있지만 3가지 소개

1. staggerTo // to랑 비슷한데 엘리먼트 개별로 딜레이 줄수있다 
TweenMax.staggerTo(squares, 1, 
           {backgroundColor: '#ffea00',
            y: 150,
            ease: Power2.easeIn,
            stagger: 0.5});
박스마다 1초씩 애니메이션효과가 들어가는데 0.5초 간격을 두고 작동하기때문에 
총 4개의 박스가 있으니 약 5초정도 작동하는것 
2. staggerFrom //staggerTo의 반대 
3. staggerFromTo //마찬가지 

속성
1. repeat 
repeat: -1 주면 무한반복, 횟수지정가능 
2. yoyo
yoyo: true 주면 요요처럼 왔다갔다함 
3. cycle
반복하고싶은 효과를 지정해줄수있음 
cycle: { backgroundColor: ['#ffea00, '#ff1493'], y: [-100, 100] }

---

timelinelite 

cdn은 tweenlite + cssplugin or tweenmax 사용

=개별엘리먼트 시간차두고 효과줄때 사용 
지금처럼 간단한경우에는 잘 모르지만 효과가 복잡해질경우 timeline을 안쓰면 어려워짐

const tl = new TimelineLite();
tl.to(square1, 1, {y: -130, backgroundColor: '#ffea00'});
tl.to(square3, 1, {y: 130, backgroundColor: '#ff1493'});
tl.to(square1, 1, {x: 240});
tl.to(square3, 1, {x: -240});
tl.to(square1, 1, {y: 0});
tl.to(square3, 1, {y: 0});

---

scrolltrigger plugins

1. 해당 요소가 화면에 보이는 지점에서 애니메이션 시작하게 하는거 
gsap.to('.box2', {scrollTrigger: ".box2", x: 400, duration: 2 }) 
= box2요소가 화면에 보일때 x축으로 400픽셀 2초간 이동 

2. 일회성이 아니라 스크롤 올렸다 내렸다 할때 효과 넣으려면 
toggleActions추가 ex) toggleActions: "resume pause reset pause" 
onEnter, onLeave, onEnterBack, onLeaveBack 네가지로 구성되는데 
스크롤과 요소의 위치에 따라서 네가지 액션이 실행됨 

3. 시작/종료 지점 선택 
디폴트값은 화면의 하단과 요소의 상단부분이 보일때, 
이 지점을 바꾸려면 start 메서드 추가 
이 메서드 인디케이터를 화면에서 보이게 하려면 markers: true하면 나타남 
start, end, scroller-start, scroller-end 이렇게 나오는데 
start: 'top center' 추가했다고 치면 
인디케이터로 보면 top은 start 자리를 나타내고 
center는 scroller-start의 자리를 나타내는걸 알수있음 

end: '+=500' 을 예시로 들면 
애니메이션을 시작지점에서 500px스크롤된 다음 종료하라는 말 

4. scrub 되감기
스크롤이 요소 이전으로 돌아가면 애니메이션효과 역시 되돌아가는 기능 
scrub: true or scrub: 3(수치를 넣으면 부드러워짐)

5. pinning 화면고정 
pin: true or pin: "요소의 id/class"
원페이지 스크롤에 많이쓰임

---

아니면 플러그인안써도 
쿼리셀렉터로 요소선택하고 이벤트리스너달아서 동작시키면 됨 
 
아니면 스크롤매직이라고 외부라이브러리 사용 
이 동작원리는 컨트롤러 > 오브젝트 씬 > 애니메이션 오브젝트 이렇게 되어있음 
애니메이션 오브젝트를 씬에 추가해야함 => setTween()메서드 사용 
그리고 이 씬을 컨트롤러에 추가 => addTo()메서드 사용 
그리고 이 씬이 일어날 트리거 지정 
triggerElement: "#trigger1" 하면 trigger1이라는 요소에 닿으면 애니메이션 발생