GSAP란?
The GreenSock Animation Platform (줄여서 GSAP)는 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리 입니다.
이 GSAP는 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있으며 가볍고 사용방법이 쉽다는 가장 큰 장점이 있습니다.
1. setting
가장 먼저 CDN에서 라이브러리 가져와야 합니다.(파일 다운로드도 가능)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>2. 기본 메서드
◻️ 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.from("타겟", {속성: 속성값, ....});
◻️ gsap.fromTo()
시작 점과 끝나는 점을 지정하는 애니메이션입니다.
gsap.fromTo(".box-1", {y: 50}, {duration: 2, x: 500, y: 0});
gsap.fromTo("타겟", {시작 속성: 시작 속성값, ....},{끝나는 속성: 끝나는 속성값, ....});
- 시작 속성(values)에는 (ease, duration, delay, onComplete 사용 못함)
- fromTo 대문자 주의!
◻️ gsap.set()
요소에 속성 값을 미리 설정합니다.
//scale 0.8인 상태에서 1.5로 변하는 애니메이션
gsap.set('.sc_intro',{scale: 0.8});
gsap.to(".sc_intro", {
opacity: 0.5,
scale: 1.5,
},
});
gsap.set("타겟", {속성: 속성값, ....});
- 여러개 속성에 동시에 설정 가능
- css를 미리 설정할 수 있지만 페이지 로딩 후 바로 보여야 하는 애니메이션의 경우 gsap보다 css에서 직접 설정하는 것이 좋다(파일을 불러오고 애니메이션이 시작되기 때문에 gsap.set설정하기 전 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.timeline("타겟", {속성: 속성값, ....});
- 변수 선언 후 원하는 순서대로 애니메이션 설정 가능
📚 Coding Notes