GSAP 사용법 알아보기

OOOY·2023년 9월 22일

GSAP

JS

목록 보기

3/5

내 자신이 답답해서 쓰는 필기용 기초 사용법 😂

GSAP : 자바스크립트 애니메이션 라이브러리

💡 Swiper와 비슷한 곳. 다양한 형태의 자바스크립트 애니메이션을 제공한다. (스크롤 트리거, 스플릿 텍스트 등…)

TMI 나는 스크롤 트리거를 사용하기 위해 GSAP을 접하게 되었다. (근데 장렬히 실패함)

기본 메서드

gsap.to('',{})
gsap.from('',{})
gsap.fromTo('',{}{})   //기본문법

gsap.to('',{
	opacity:0 // 투명도 조절
	y:100 // y축 100px 만큼이동
	stagger:0.3 // 순차적으로 실행
}) // css 비슷하게 작용하나 더욱 간

// to -> 실행 이후 값 세팅하기
// from -> 실행 이전 값 세팅하기
// fromTo -> 실행 이전+이후 값 동시 세팅하기
// stagger -> 순차적으로 실행

스크롤 트리거 사용법

🔗 https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger

링크의 Extra Plugins - Scroll Trigger 체크하고 하단의 스크립트 링크 두 개 js로 복붙 하기

gsap.to('',{ //실행 대상 

	scrollTrigger: {
		trigger: '', //스크롤 위치 
		scrub:1, // 스크롤을 올릴 때 다시 재실행 시켜줌
    start: '0% 0%', //trigger 영역 기준 상단 - 윈도우 화면 기준 상
    end: 'bottom center', //trigger 영역 기준 하단, 윈도우 화면 기준 센터
    markers:true, //좌표 확인용
},
		'css':0 //css style 명령어를 입력하면 gsap으로도 조정 가능! ex) 'padding-top:0'
		onUpdate: // 업데이트 될 때마다 실행 시키기
		scale: 6 // 스케일 키우기 
})

Timeline 활용하기 → 시간 순서대로 실행 시키기

const textMotion = gsap.timeline({

	scrollTrigger: {
		trigger: '',
		scrub:1, // 스크롤을 올릴 때 다시 재실행 시켜줌
    start: '0% 0%', //trigger 영역 기준 상단 - 윈도우 화면 기준 상
    end: 'bottom center', //trigger 영역 기준 하단, 윈도우 화면 기준 센터
    markers:true, //좌표 확인용
},
})

textMotion.addLabel('a') //라벨을 붙인 애들 동시에 실행되게 하기 
textMotion.to('','padding-top:0','a')
textMotion.to('',0.4,{stagger:0.1},'yPercent:-100','a')
//textMotion.to('',0.4(진행속도 조절){})
//yPercent = transform: -100% 와 같은 뜻

각각 실행시키기

<div class-"box1" data-y="100"></div>
<div class-"box2" data-y="200"></div>
<div class-"box2" data-y="300"></div>

//각각 데이터값 주고 js로 부르기

$('').each(index,element){ 
	y=$(this).data('y'); //변수에 데이터 값 담기
	gsap.to('element',{
	scrollTrigger: {
		trigger: '',
		scrub:1, 
    start: '0% 0%',
    end: 'bottom center',
    markers:true, 
},
		yPercent:y //원하는 값에 변수 넣어주기
})
}