[gsap] 기본 사용법

Gsap

The GreenSock Animation Platform(GSAP)는 타임라인 기반의 애니메이션 자바스크립트 라이브러리.

1. 셋팅

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

2. BASIC METHOD

gsap.to()

움직임의 끝나는 점을 지정.

//x축으로 300 이동하는데 2초가 걸린다+딜레이 5초
gsap.to('.box-1', {x: 300, duration: 2},5);

gsap.to("타겟", {속성: 속성값, ....});

• 타겟(targets) : 애니메이션을 적용할 개체를 선택
• 속성(values) : 애니메이션과 관련된 속성을 설정

gsap.from()

움직임의 시작 점을 지정

//x축 300에서 제자리로 돌아오는데 2초 걸린다+딜레이3초
gsap.from('.box-1', {x: 300, duration: 2},3)

gsap.fromTo()

움직임의 시작 점과 끝나는 점을 지정

gsap.fromTo(".box-1", {y: 50}, {duration: 2, x: 500, y: 0});

gsap.fromTo("타겟", {시작 속성: 시작 속성값, ....},{끝나는 속성: 끝나는 속성값, ....});

• 시작 속성(values)에는 (ease, duration, delay, onComplete 사용 못함)

gsap.set()

요소에 속성 값을 미리 설정

gsap.set(".box-1", {y: 0, opacity: 0});
gsap.fromTo(".box-1", {y: 150, opacity: 1});

페이지 로드 후 바로 보여야 하는 애니메이션의 경우, CSS로 설정 권장.
라이브러리를 불러온 후 실행시키기 때문에 애니메이션 시작 전 CSS가 보일 수 있음

gsap.timeline()

연속적으로 실행되는 애니메이션 설정

const tl1 = gsap.timeline();
tl1.fromTo(".box-1", {y: 50}, {duration: 2, x: 500, y: 0});//{앞에쓴게 to}{뒤에쓴게 from}
tl1.to(".box-1", {duration: 2, x: 0, y: 0, delay: 1});//1초 후에 애니메이션 작동
tl1.to(".box-1", {duration: 2, opacity: 0.5});

GSAP-ScrollTrigger

스크롤 기반 애니메이션, 또한 애니메이션과 무관하더라도 스크롤과 관련된 모든 것을 트리거한다.

1. 셋팅

<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>

2. 기본 사용법

gsap.to('.item',{ 
        scrollTrigger:{ 
            trigger:".target", //부모를 trigger로 잡음
            start:"0% 0%", //스크롤을 다 내릴때까지 움직이고, end에 도달할때 끝
            pin:true, //활성 상태에서 트리거 요소 고정
            end:"+=300%", //시작부분에서 스크롤의 영역을 3배(300)로 늘려주기(300) 
            scrub:0,
        },
        xPercent:-300 //각각 100vw(100%)으로, 300%를했을때 4가지 li가 모두 보인다
    })

gsap.to(대상, {
scrollTrigger:{
trigger:대상,
스크롤속성:값,
스크롤속성:값
}, 속성:값, duration:재생시간
})