GSAP 시작하기

GSAP이란?

The GreenSock Animation Platform (줄여서 GSAP)는 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인기반의 애니메이션 자바스크립트 라이브러리 이다.
GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있다고 한다.

GSAP 바로가기 >

GSAP CDN 라이브러리

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

GSAP 사용법

gsap.to()

• gsap.to("대상",{속성});
  -- 현재 위치에서 속성만큼 이동시키는 동작

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

ex) .box를 x축으로 +200 이동시키기

gsap.from()

• gsap.from("대상",{속성});
  -- 속성이 시작값이 되어 원래대로 되돌아오는 애니메이션

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

ex) .box를 x축 200에서 0으로 이동

gsap.fromTo()

• gsap.fromTo("대상",{from속성},{to속성});
  -- from 속성이 시작값으로 세팅되고 to속성으로 종료

gsap.from(".box",{
  x:200
},{
  y:100
});

ex) .box를 x축 +200에서 y축 +100으로 이동

gsap.timeline()

-- timeline을 사용하여 여러 대상을 순차적으로 동작을 부여함

const motion1 = gsap.timeline({
	defaults:{
		duration:1, 
	},
	paused:true,
})
motion1
	.to('.box1',{  //실행 순서 1번
		x:100,
	})
	.to('.box2',{ //실행 순서 2번
		x:100,
	})
	.addLabel('a') //라벨을 부여해서 여러개를 동시에 실행할수 있음
	.to('.box3',{  //실행 순서 4번
		x:100,
	},'a')
	.to('.box4',{ //실행 순서 3번
		x:100,
	},'a-=0.1') //라벨 붙인것중에서도 먼저 실행하고 싶은 경우
	.to('.box5',{ //실행 순서 4번
		x:100,
	},'a')
	.to('body',{ //실행 순서 4번
		background:'#00f'
	},'a')

애니메이션 제어

• gsap.play() - 재생
• gsap.pause() - 정지
• gsap.resume() - 재개
• gsap.reverse() - 되돌리기
• gsap.restart() - 재실행

$('.btn1').click(function(){
	motion1.play()
})
$('.btn2').click(function(){
	motion1.pause()    
})
$('.btn3').click(function(){
	motion1.restart()   
})
$('.btn4').click(function(){
	motion1.reverse()
})
$('.btn5').click(function(){
	motion1.resume()
})

스크롤트리거(scrollTrigger)

const motion1 = gsap.timeline({
	scrollTrigger:{ //스크롤트리거
		trigger:".box3", // 트리거는 .box3기준 
		start:"0% 50%", //.box3기준, 윈도우 기준 만나면 실행 
		end:"100% 70%", //.box3기준, 윈도우 기준 만나면 종료
		markers:true, //표시자.
		scrub:1,//되감기(애니메이션 재사용 기능)
	},
})

motion1
	.addLabel('a')
	.to('.box3 h1',{
		xPercent:100,
		scale:2,
		rotation:360
	},'a')
	.to('.box3',{
		background:'#f00'
	},'a')

스크롤트리거 - 반복문 사용

boxList = document.querySelectorAll('.box');

boxList.forEach(element => {
	gsap.to(element.children,{
		scrollTrigger:{
			trigger:element,
			start:"0% 0%",
			end:"100% 0%",
			markers:true,
			scrub:1,
		},
		xPercent:100,
		scale:2,
		rotation:360
	})
});

$('.box').each(function(i,e){
	color = $(this).find('h1').data('color');
	gsap.to($(this).find('h1'),{
		scrollTrigger:{
			trigger:e,
			start:"0% 0%",
			end:"100% 0%", 
			markers:true,
			scrub:1,
		},
		xPercent:100,
		scale:2,
		rotation:360,
		color:color
	})
})