Study/JavaScript

[JavaScript] GSAP | TweenMax 쉽게 애니메이션을 구현하는 방법

AC 2021. 7. 18. 16:25

GSAP 홈페이지

GSAP를 자바스크립트 애니메이션의 Swiss Army Knife라고 생각하면 됩니다.

 

하지만 더 좋습니다. JavaScript가 만질 수 있는 모든 것(CSS 속성, 캔버스 라이브러리 개체, SVG, React, Vue, 일반 개체 등)에 애니메이션을 적용하고 자동 GPU 가속을 포함하여 놀라운 속도로(jQuery보다 최대 20배 빠름) 수많은 브라우저 불일치를 해결합니다. 변환의. "왜 GSAP인가?"를 참조하십시오. 자세한 내용은 기사를 참조하십시오. 대부분의 다른 라이브러리는 CSS 속성만 애니메이션합니다. 또한, 시퀀싱 능력과 런타임 컨트롤은 그에 비해 창백합니다.

간단히 말해서, GSAP는 지구상에서 가장 강력한 고성능 자바스크립트 애니메이션 라이브러리입니다. 이것이 아마도 Google이 JS 기반 애니메이션에 권장하고 모든 주요 광고 네트워크에서 파일 크기 계산에서 제외하는 이유일 것입니다. 앱을 구성하는 방법을 지시하는 모놀리식 프레임워크와 달리 GSAP는 완전히 유연합니다. 원하는 곳에 뿌려주세요.

출처 : GSAP 홈페이지에서


GSAP 를 사용하면 Javascript에 대한 지식이 뛰어나지 않아도 애니메이션 제작을 할 수 있어요!

사용방법은 아래의 포스트에서 자세하게 볼 수 있습니다.

출처 : https://byseop.netlify.app/gsap/

 

GSAP 트윈맥스(TweenMax)를 이해하고 사용하기. - BYSEOP's devlog

BYSEOP's devlog

byseop.netlify.app

 

관련 Youtube 영상입니다.

https://youtu.be/iatHv98BqJw

 

LIST