티스토리 뷰

GSAP

[GSAP] GSAP

GSAP

웹 브라우저에서 탁월한 애니메이션을 구현하기 위한 자바스크립트 라이브러이입니다. 기존의 CSS 애니메이션과 JavsScript 애니메이션보다 사용성이 편하고, 탁월한 퍼포먼스가 돋보이는 애니메이션 전용 라이브러리입니다.


GSAP3

2019년 GSAP3가 업그레이드 되었습니다. 50가지 이상의 새로운 기능들이 생기고 기대되는 기능들이 많습니다.

  • 이전 버전의 TweenMax 보다 파일크기가 절반이상 줄고 더 많은 기능들이 생겼습니다.
  • 모션 경로에 따라 애니메이션을 움직이는 새로운 플러그인이 생겼습니다.
  • TweenLite, TweenMax, TimelineLite, TimelineMax의 API가 gsap로 통합되었지만 기존의 코드와도 호환성이 유지됩니다.
  • Timeline의 기본값이 자식에게도 상속받습니다.
  • 새로운 유틸 메서드가 15가지 생겼습니다.(interpolate(), random(), snap(), mapRange())
  • 키프레임 기능이 추가되었습니다.
  • 효과기능이 추가되었습니다.
  • ES6 모듈 형식을 반영하며 익스9 버전까지 호환성을 맞추었습니다.

GSAP 사용하기

html
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>GSAP</title>

		<!-- CDN TweenMax -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
		
		<!-- CDN TweenLite, CSSPluginm, EasePack  -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.5/plugins/CSSPlugin.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.5/easing/EasePack.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.5/TweenLite.min.js"></script>
		
		<!-- local -->
		<script src="js/TimelineLite.min.js"></script>
		<script src="js/TimelineMax.min.js"></script>
		<script src="js/TweenLite.min.js"></script>
		<script src="js/TweenMax.min.js"></script>
		
		<!-- jquery + gsap -->
		<script src="js/jquery.gsap.min.js"></script>
	</head>
	<body>
		
	</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼