GSAP란 무엇인가?

 

 

GSAP는 무엇일까?! 내가 원하는 animation을 너무 자연스럽게 사용하고 있어서 정확히 알고 싶었다.

일단 ChatGPT에 검색해보았다!!

 

 

GSAP(GreenSock Animation Platform)

GSAP(GreenSock Animation Platform)은 강력하고 유연한 웹 애니메이션 라이브러리로, HTML, CSS, JavaScript를 사용하여 웹 페이지 및 앱에 동적인 애니메이션을 추가하는 데 사용됩니다. GSAP은 웹 개발자가 쉽게 사용하고 통제할 수 있는 다양한 애니메이션 기능을 제공합니다.

1. **크로스 브라우징:**
   - GSAP은 다양한 브라우저에서 일관된 애니메이션을 지원하며 크로스 브라우징 문제를 처리하는 데 용이합니다.

2. **간편한 사용법:**
   - GSAP은 직관적이고 간단한 API를 제공하여 개발자가 애니메이션을 쉽게 만들고 제어할 수 있습니다.

3. **풍부한 기능:**
   - GSAP은 다양한 애니메이션 속성과 옵션을 지원하여 높은 수준의 통제를 제공합니다. 이로써 더 복잡하고 동적인 애니메이션을 만들 수 있습니다.

4. **모션 경로 및 이질감 효과:**
   - GSAP은 모션 경로 및 이질감 효과와 같은 고급 애니메이션 효과도 지원합니다.

5. **성능 최적화:**
   - GSAP은 성능 최적화가 잘 이루어져 있어서 부드럽고 효율적인 애니메이션을 구현할 수 있습니다.

6. **플러그인 생태계:**
   - GSAP은 플러그인 생태계가 풍부하며, 텍스트, 스크롤, 이미지, SVG 등 다양한 요소들에 대한 특별한 애니메이션을 만들 수 있도록 도와줍니다.

GSAP은 주로 웹 개발에서 웹 페이지나 웹 애플리케이션의 사용자 경험을 향상시키기 위해 사용되며, React, Vue, Angular와 같은 프레임워크와 함께도 효과적으로 사용될 수 있습니다.

 

이렇다고 한다!! 그렇다면 실제 적용은 어떻게 할까?

 

gsap.from()

시작 점을 지정하는 애니메이션입니다.

//x축 300에서 제자리로 돌아오는데 2초 걸린다+딜레이3초
gsap.from('.box-1', {x: 300, duration: 2},3)

 

 

gsap.to() 

움직임의 끝나는 점을 지정하는 애니메이션입니다.

//x축으로 300 이동하는데 2초가 걸린다+딜레이 5초
gsap.to('.box-1', {x: 300, duration: 2},5);

 

 

gsap.fromTo()

시작 점과 끝나는 점을 지정하는 애니메이션입니다.

gsap.fromTo(".box-1", {y: 50}, {duration: 2, x: 500, y: 0});

 

※ 시작 속성(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.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});