[js]gsap 사용법

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

jsap cdn

 

**css케밥 케이스를 파스칼 케이스로 변경

ex) 

font-size > fontSize

background-image > backgroundImage

** px를 제외한 수치를 따옴표 사용 

** 색상의 경우 헥스코드가 아닌 영문도 사용 가능

 

 

1. gsap.to

css 설정값 → script 설정값

ex) 로드 시 .box가 w200h200에서 w100h100으로 .5초동안 변화함

<style>
.box{width: 200px; height: 200px; background-color: yellow;}
</style>
<div class="box"></div>
<script>
gsap.to(".box", {
	scrollTrigger:".box",
	dration: .5, 
    width: 100, 
    height: 100
    }
)
</script>

 

2. gsap.from

script 설정값 → css 설정값

ex) 로드 시 .box가 w200h200에서 w100h100으로 .5초동안 변화함

 

3. gsap.fromTo

css 설정값 무시, script 설정값만 인식

ex) 로드 시 .box가 w0h0에서 w100h200으로 .5초동안 변화함

gsap.fromTo(
    ".box",
    {width: 0, height: 0},
    {dration: .5, width: 100, height: 200}
)

 

4. scrollTrigger

→ 스크롤하는만큼 나타나는 애니메이션

gsap.registerPlugin(ScrollTrigger);
gsap.to(".box",{ 
// 움직일 el
    scrollTrigger : {
        trigger:".box",
        // 기준이 될 el
        scrub : ture,
        // 숫자로 기입도 가능함, 숫자가 커질수록 부드러워짐
    },
    background: "blue"
})

→ 움직일 el가 트리거에 닿으면 gsap시작

 

scrollTrigger 속성

markers : true or false(default)

// 애니메이션 시작과 끝 지점을 표시해줌

start : "center" or "top center" 등 많음

// center는 해당 엘리먼트의 중앙, top center는 뷰페이지의 중앙

// start : "top center" → 움직일 el의 top이 뷰포트 center에 닿으면 시작

// start : "top bottom" → 움직일 el의 top이 뷰포트 bottom에 닿으면 시작

// start : "bottom bottom" → 움직일 el의 bottom이 뷰포트 bottom에 닿으면 시작

 

end : start와 동일

// end : "top center" → 트리거(기준이 될 el)의 top이 뷰포트 center에 닿으면 종료

// end : "top bottom" → 트리거(기준이 될 el)의 top이 뷰포트 bottom에 닿으면 종료

// end : "bottom bottom" → 트리거(기준이 될 el)의 bottom이 뷰포트 bottom에 닿으면 종료

 

 

**scrollMagic

→ 스크롤트리거 scrub과 동일

See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen.