Giant Danio Fish
본문 바로가기
CSS

CSS - GSAP 알아보기

by 코딩왕자 2022. 8. 29.

GSAP 알아보기

GSAP은 웹 브라우저에서 탁월한 애니메이션을 구현하기 위한 자바스크립트 라이브러리입니다.GSAP은 기존의 CSS 애니메이션과 JavsScript 애니메이션보다 사용성이 편하고, 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다. CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있습니다.

사용방법

GASP홈페이지에서 gsap.min.js를 가져와서 사용할 수 있습니다.

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

예시

아래의 예시는 코드팬에 GSAP에서 아주 잘 만든 예제이기에 한번 보시라고 가져왔습니다. 이처럼 GSAP는 자바스크립트에서 만들 수 없는 부드럽고 섬세한 애니메이션을 훨신 간편하게 만들수 있습니다.

'CSS' 카테고리의 다른 글

SVG - 알아보기  (10) 2022.09.07
CSS 애니메이션 연습하기 03  (2) 2022.09.02
CSS 애니메이션 연습하기02  (9) 2022.08.29
CSS 애니메이션 연습하기01  (7) 2022.08.29
CSS 요소숨기기  (10) 2022.08.25

댓글


광고 준비중입니다