[💻] GSAP

GSAP

GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리 (카카오택시,카카오헤어등등)

일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다.

하지만 더 복잡하고 효과적으로 사용하기 위해 만들어졌다.

📌 사용법

1. gsap설치
2. 내 페이지에 cdn연결 (제이쿼리보단 밑에 내 파일보다 위에)

더 많은 cdn

<script src="./js/jquery-1.12.4.min.js"></script> //제이쿼리

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

<script src="./js/main.js"></script> //내파일

서로 잘 상응되는 cdn을 쓰면 좋다.

gsap사이트 -> products -> scrollTrigger ->밑에 다운로드버튼

한눈에 볼 수 있음

스크롤은 엉망진창 2배3배 이런식으로 주다보면 엉킬수가 있음으로 이런 플러그인을 쓰면 알맞음

✏ 문법 쓰는법

gsap ScrollTo 검색하면 된다.

✏ 기본언어

fom ------> 현재 ------> to

gsap.to ~이벤트 이후의 값
gsap.from ~이벤트 전을 꾸밀때
gsap.fromTo ~전~후 둘다 셋팅

✏ 기본값

gsap.to('.클래스',{
			속성
		})

📌 예제

GSAP 예제

◼ gsap.to예제

~이벤트 이후의 값
현재 ------> to

gsap.to(".box", {
  x: 200
});

박스가 x축으로 200움직인다.

이것은 css로 transform: translateX(200px) 과 정확히 같은 효과이다.

duration은 작성하지 않으면 기본값인 0.5초로 나타난다.

◼ gsap.from예제

~이벤트 전을 꾸밀때
fom ------> 현재
시작값을 정하고 원래대로 되돌아오는 애니메이션
실행을 먼저 시켜주고 원래대로 돌아가기

.box1{ width: 100px; height: 100px; background: orange; }

gsap.from(".box1", {
        duration: 3,
        x: 500,
        width: 300,
        opacity: 0.2,
    });

x 500px,w 300px, 투명도 0.2에서 원래 설정해놓은
w 100px,h 100px로 돌아간다.

◼ gsap.fromTo예제

from 속성이 시작값으로 세팅되고 to 속성이 종료값
fom ------> 현재 ------> to

.box2{
	width: 200px;
	height: 100px; 
	background: greenyellow; 
}

gsap.fromTo(".box2",{
     fontSize: 40
     },{
     duration: 3,
     x: 300,
     fontSize: 16,
     backgroundColor: 'blue',
});

📌 scrollTrigger

스크롤트리거 기본

스크롤을 해서 해당 요소가 보일 때 애니메이션 효과가 나타나도록 하는 것이 목적이다.

gsap.to('.box2',{
        scrollTrigger:{
            trigger:".box2", //기준태그
            start:"top 80%", //[트리거기준, 윈도우] 둘이 만나야 실행 
            end:"bottom top", //[트리거기준, 윈도우]둘이 만나야 끝
            markers:true, //좌표표시
            scrub:1, //뭉대는거 없으면 1회성
        }, //컴마 필수
        yPercent:-10
    })

◼ start:"1트리거기준, 2윈도우"

1. 트리거의 시작과 끝

2. 윈도우 기준으로 위치 지정
   -> scroller-start의 위치를 조정한다고 생각하면됨
   -> 지정 위치 scroller-start에서 시작 scroller-end에서 끝남

📌timeline

예를들어, 내려갔다 올라오는 애니메이션을 구현할 때, delay를 줘서 늦춰서 구현했었지만

timeline을 사용한다면 애니메이션을 안 겹치게 차례로 작동하게 해준다.

◼ Scrub (되감기)

Scrub은 스크롤이 요소 이전으로 돌아가면 애니메이션 역시 되돌아가는 기능을 말한다.

즉 재사용을 할 수 있는 기능

◼ stagger

시간 간격을 두어 애니메이션을 실행하도록 도와준다.

✏ offset().top

offset().top은 선택한 요소의 높이값을 픽셀단위로 반환한다.

toggleClass

start 시점에서 class가 추가되고 end에서 class가 삭제된다.

https://velog.io/@yesslkim94/GSAP-ScrollTrigger