GSAP (사용법, 기초 문법[to, from, fromTo, timeline], ScrollTrigger,)

HTML5 기반 웹 애니메이션을 제작하고 제어하기 위한 강력한 자바스크립트 라이브러리

사용법

1. index.html에 cdn 가져오기

2. npm install gsap

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

gsap.to()

움직임의 끝을 지정하는 애니메이션

본래 자리에서 어떻게 끝을 낼 것인지 지정

CSS에서 animation과 관련된 모든 속성 사용이 가능하다.

gsap.to('e', {key: value, key2...});

gsap.from()

설정된 자리에서 어떻게 본래 자리로 돌아갈 것인지 지정

gsap.from('e', {key: value, key2...});

gsap.fromTo()

움직임의 시작과 끝 모두 설정이 가능하다.

gsap.fromTo('e', {startKey: value...}, {endKey: value...});

gsap.timeline()

연속되는 애니메이션을 설정한다.

첫 애니메이션의 종료 이후에 다음 애니메이션이 실행된다.

기존엔 delay: 1.. 2.. 처럼 요소마다 딜레이를 다르게 설정했지만 .to를 이용해 쉽게 사용할 수 있다.

const tl = gsap.timeline();
tl.to('trigger01', {key1: value, key2: value...})
tl.to('trigger02', {key1: value, key2: value...})

gsap.set()

요소가 특정 값을 가지고 시작해야할 때 사용한다.

여러 요소를 동시에 설정할 수 있다.

하지만 페이지 렌더링 이후, 바로 보여져야 할 애니메이션이라면 css에서 직접 값을 설정해주는 것이 좋다.

gsap이라는 라이브러리의 로딩시간이 있기 때문이다.

또한 set()은 특정 값을 갖게만 해주는 것이지 메서드

// 요소에 값을 설정하고 실행
gsap.set('e', {x: 50, y: 50, opacity: 0});
gsap.to('e', {x: 0, y: 0, opacity: 1});

// 여러 요소를 동시에 설정
gsap.set('e1', 'e2', 'e3', {x: 50, y: 50, opacity: 0});

ScrollTrigger

스크롤과 트리거를 이용해 스크롤과 관련된 애니메이션 스크립트를 제어할 수 있는 라이브러리

- trigger : 애니메이션을 진행할 요소, 기준점이 되는 요소

- start : '요소의 시작점 브라우저의 시작점'

- end : '요소의 종료지점 브라우저의 종료지점'

- toggleActions : 애니메이션 시작시, 종료시, 실행중 이탈, 종료후 이탈 상태를 지정할 수 있다.

- onEnter, onLeave, onEnterBack, onLeaveBack 순

- play, parse, resume, reset, restart, reverse, none 의 상태 지정 가능

현재 브라우저의 스크롤 상태에 따라 애니메이션 재시작, 역순, 멈춤 등의 옵션을 이용해 다회성 애니메이션을 설정 할 수 있다.

- markers : 트리거와 브라우저가 어디서 만나야 시작되고 종료되는지를 보여주는 개발 가이드 선을 보여준다.

gsap.to('e', {
    x: 500,
    rotation: 720,
    borderRadius: 200,
    
    ScrollTrigger: {
        trigger: 'e',
    	start: 'top 50%',
        end: 'bottom 20%',
        toggleActions: 'play pause reverse none',
        markers: true,
    }
    
});

- scrub : 스크롤이 요소 이전으로 돌아가면 애니메이션 또한 되돌아 가는 기능

속성 값으로 true 및 정수 값을 넣을 수 있다.

값이 클 수록 부드러워진다는데 느리고 딜레이 있게 실행된다가 더 맞는 것 같다.

- pin : 특정 요소를 고정시킬 때 사용, start와 end의 값을 통해 고정시켜 실행할 구간 조정이 가능하다.

gsap.to(e, {
	ScrollTrigger: {
    	trigger: e,
    	pin: true, // 트리거가 고정
        pin: '#box', // 해당 엘리먼트가 고정 
        pinSpacing: true || 'margin', // pin 애니메이션의 마지막 요소가 끝났을 때, 여백으로 다음 엘리먼트가 이어서 보이게끔 해준다. true == padding
    }
});

예제

const box1 = document.querySelector('#box1');
const box2 = document.querySelector('#box2');
const box3 = document.querySelector('#box3');
const box4 = document.querySelector('#box4');

// gsap 사용법
gsap.to(요소, {옵션})

gsap.to(box1, {

    duration: 2, // 애니메이션 동작 시간
    x: 500, // x축으로 500px만큼 이동
    rotation: 360 // 해당 각도만큼 회전
    borderRadius: 100, // 애니메이션 실행되는 동안 100으로 설정됨
    
    // 스크롤로 애니메이션을 제어
    scrollTrigger: {
    	trigger : box1, // box1이 애니메이션 작동 스위치
        start: 'top 50%', // 브라우저 기준으로 top 50%에 도달할 시
        end: 'bottom 20%', // 브라우저를 기준으로 bottom 20%에 도달할 시
        
        // 애니메이션 시작, 종료, 진행중 나감, 종료 이후 나감의 상태에 효과를 지정
        toggleActions: 'play pause reverse none',
        markers: true, // start와 end, trigger의 마커를 표시해 어느 구간에 실행되는지 보기 편하게 해준다.
    }
});

gsap.to(box2, {
	duration: 1,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    
    scrollTrigger: {
    	trigger: box5,
        start: 'top 50%',
        end: 'bottom 20%',
        scrub: .5 // 스크롤 움직인 값에 따라 실행한다. 아래론 정방향 위론 역방향으로 이동한다. true, 1, 2 값을 넣을 수 있다.
        markers: true,
    }
});

ScrollTrigger

gsap.to() 에서 이용하는 scrollTrigger보다 더 많은 기능을 사용할 수 있다.

pin

화면을 고정시킨 상태에서의 애니메이션 효과

taengee 님의 블로그