본문 바로가기

Webstoryboy

Category

Explanation

ANIMATION/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>

Sample1

기본적인 GSAP 애니메이션 예제입니다.

결과
 
 
 
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>jQuery Animation</title>
	<style>
		/* option */
		.animation {
			background-color: #f7f7f7;
			border-radius: 3px;
			padding: 20px;
			counter-reset: items;
		}
		.box {
			position: relative;
			width: 60px; height: 60px; line-height: 60px;
			text-align: center; color: #fff; font-size: 12px;
			margin: 10px;
			border-radius: 50%;
			background-color: #A2CBFA;
			border: 1px solid #4390E1;
			box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
		}
		.box::before {
			counter-increment: items;
			content: counter(items);
		}
		.choice > a {    
			border: 1px solid #5f6368;
			padding: 7px 20px 5px 20px;
			display: inline-block;
			border-radius: 20px;
			text-decoration: none;
			margin: 3px;
		}
	</style>
</head>
<body>
	
	<div class="animation ani1">
		<div class="box box1"></div>
		<div class="box box1"></div>
		<div class="box box1"></div>
	</div>

	<div class="choice choice1">
		<a href="#" class="reset1">리셋</a>
		<a href="#" class="start1">클릭</a>
	</div>

	<!-- script -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
	<script>
		$("a").on("click",function(e){
			e.preventDefault();
		});

		// $(".choice1 .reset1").on("click",function(){
		//     TweenMax.to(".box1", 0, { left: "0%" });
		// });

		// $(".choice1 .start1").on("click",function(){
		//     TweenMax.to(".box1", 1, { left: $('.animation').width()-70+"px" });
		// });  
		
		//.width() 선택한 요소의 가로(패딩/마진/보더 불포함)를 설정하거나 반환합니다.
		//.innerWidth() 선택한 요소의 가로(패딩 포함, 보더/마진 불포함)를 설정하거나 반환합니다.
		//.outerWidth() 선택한 요소의 가로(패딩/보더 포함, 마진 불포함)를 설정하거나 반환합니다.

		//element.offsetWidth 선택한 요소의 가로(패딩/보더/스크롤바 포함) 사이즈를 반환합니다.
		//element.clientWidth 선택한 요소의 가로(패딩 포함, 보더/스크롤바 불포함) 사이즈를 반환합니다.
		//element.scrollWidth 선택한 요소의 가로 전체 스크롤 영역의 값을 반환합니다.
		//getBoundingClientRect() 선택한 요소의 렌더링된 크기를 반환합니다.

		const leftWidth1 = $('.animation').innerWidth() - 110 + "px"
		const leftWidth2 = document.querySelector('.animation').offsetWidth - 110 + "px";
		//alert(leftWidth1)
		//alert(leftWidth2)
		const startBtn = document.querySelector('.choice1 .start1');
		const resetBtn = document.querySelector('.choice1 .reset1');
		
		startBtn.addEventListener('click', moveStart);
		resetBtn.addEventListener('click', moveReset);

		function moveStart(){
			TweenMax.to('.box1', 1, {left: leftWidth1 });
			//TweenMax.fromTo(".box2", 1, {left:  0 }, {left: leftWidth1 });
			//TweenMax.to(['.box1, .box2, .box3'], 1, { left : leftWidth1 });
			//TweenMax.to('.box1', 1, {left: leftWidth1, repeat: 1, yoyo: true});
		}
		function moveReset(){
			TweenMax.to('.box1', 0, {left: "0%"});
		}
	</script>
</body>
</html>

 

Sample2

기본적인 GSAP 애니메이션 예제입니다.

TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>GSAP Animation</title>
	<style>
		/* option */
		.animation {
			background-color: #f7f7f7;
			border-radius: 3px;
			padding: 20px;
			counter-reset: items;
		}
		.box {
			position: relative;
			width: 60px; height: 60px; line-height: 60px;
			text-align: center; color: #fff; font-size: 12px;
			margin: 10px;
			border-radius: 50%;
			background-color: #A2CBFA;
			border: 1px solid #4390E1;
			box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
		}
		.box::before {
			counter-increment: items;
			content: counter(items);
		}
		.choice > a{    
			border: 1px solid #5f6368;
			padding: 7px 20px 5px 20px;
			display: inline-block;
			border-radius: 20px;
			text-decoration: none;
			margin: 3px;
		}
	</style>
</head>
<body>
	
	<div class="animation ani2">
		<div class="box box2"></div>
		<div class="box box2"></div>
		<div class="box box2"></div>
	</div>

	<div class="choice choice2">
		<a href="#" class="reset2">리셋</a>
		<a href="#" class="start2">none</a>
		<a href="#" class="start2">power1.out</a>
		<a href="#" class="start2">power2.out</a>
		<a href="#" class="start2">power3.out</a>
		<a href="#" class="start2">power4.out</a>
		<a href="#" class="start2">back.out(1.7)</a>
		<a href="#" class="start2">elastic.out(1, 0.3)</a>
		<a href="#" class="start2">bounce.out</a>
		<a href="#" class="start2">rough({ template: none.out, strength: 1, points: 20, taper: 'none', randomize: true, clamp:  false})</a>
		<a href="#" class="start2">slow(0.7, 0.7, false)</a>
		<a href="#" class="start2">steps(12)</a>
		<a href="#" class="start2">circ.out</a>
		<a href="#" class="start2">expo.out</a>
		<a href="#" class="start2">sine.out</a>
	</div>

	<!-- script -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> -->
	<script>
		document.querySelectorAll('.choice2 a').forEach(function(e){
			e.addEventListener('click',function(e){
				e.preventDefault();
			})
		});

		const leftWidth = document.querySelector('.animation').offsetWidth - 110 + "px";

		document.querySelectorAll('.choice2 .start2').forEach(function(e){
			e.addEventListener('click',function(){
				const easing = this.innerText
				TweenMax.to('.box2', 1, {left: leftWidth, repeat: 1, yoyo: true, ease: easing});
			})
		});

		document.querySelector('.choice2 .reset2').addEventListener('click', function(){
			TweenMax.to('.box2', 0, {left: 0});
		});
	</script>
</body>
</html>

 

Sample3

GSAP delay 애니메이션 예제입니다.

결과
 
 
 
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>GSAP Animation</title>
	<style>
		/* option */
		.animation {
			background-color: #f7f7f7;
			border-radius: 3px;
			padding: 20px;
			counter-reset: items;
		}
		.box {
			position: relative;
			width: 60px; height: 60px; line-height: 60px;
			text-align: center; color: #fff; font-size: 12px;
			margin: 10px;
			border-radius: 50%;
			background-color: #A2CBFA;
			border: 1px solid #4390E1;
			box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
		}
		.box::before {
			counter-increment: items;
			content: counter(items);
		}
		.choice > a{    
			border: 1px solid #5f6368;
			padding: 7px 20px 5px 20px;
			display: inline-block;
			border-radius: 20px;
			text-decoration: none;
			margin: 3px;
		}
	</style>
</head>
<body>
	
	<div class="animation ani3">
		<div class="box box3-1"></div>
		<div class="box box3-2"></div>
		<div class="box box3-3"></div>
	</div>

	<div class="choice choice3">
		<a href="#" class="reset3">리셋</a>
		<a href="#" class="start3">클릭</a>
	</div>

	<!-- script -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> -->
	<script>
		document.querySelectorAll('.choice3 a').forEach(function(e){
			e.addEventListener('click',function(e){
				e.preventDefault();
			})
		});

		const leftWidth = document.querySelector('.animation').offsetWidth - 110 + "px";

		document.querySelector('.choice3 .start3').addEventListener('click', function(){
			TweenMax.to(".box3-1", 1, { left: leftWidth, delay: .1 });
			TweenMax.to(".box3-2", 1, { left: leftWidth, delay: .2 });
			TweenMax.to(".box3-3", 1, { left: leftWidth, delay: .3 });
		});

		document.querySelector('.choice3 .reset3').addEventListener('click', function(){
			TweenMax.to(['.box3-1, .box3-2, .box3-3'], 0, {left: 0});
		});
	</script>
</body>
</html>

 

Sample4

GSAP duration 애니메이션 예제입니다.

결과
 
 
 
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>GSAP Animation</title>
	<style>
		/* option */
		.animation {
			background-color: #f7f7f7;
			border-radius: 3px;
			padding: 20px;
			counter-reset: items;
		}
		.box {
			position: relative;
			width: 60px; height: 60px; line-height: 60px;
			text-align: center; color: #fff; font-size: 12px;
			margin: 10px;
			border-radius: 50%;
			background-color: #A2CBFA;
			border: 1px solid #4390E1;
			box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
		}
		.box::before {
			counter-increment: items;
			content: counter(items);
		}
		.choice > a{    
			border: 1px solid #5f6368;
			padding: 7px 20px 5px 20px;
			display: inline-block;
			border-radius: 20px;
			text-decoration: none;
			margin: 3px;
		}
	</style>
</head>
<body>
	
	<div class="animation ani4">
		<div class="box box4-1"></div>
		<div class="box box4-2"></div>
		<div class="box box4-3"></div>
	</div>

	<div class="choice choice4">
		<a href="#" class="reset4">리셋</a>
		<a href="#" class="start4">클릭</a>
	</div>

	<!-- script -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> -->
	<script>
		document.querySelectorAll('.choice4 a').forEach(function(e){
			e.addEventListener('click',function(e){
				e.preventDefault();
			})
		});

		const leftWidth = document.querySelector('.animation').offsetWidth - 110 + "px";

		document.querySelector('.choice4 .start4').addEventListener('click', function(){
			TweenMax.to(".box4-1", 1, { left: leftWidth, ease: "power3.out" });
			TweenMax.to(".box4-2", 2, { left: leftWidth, ease: "power3.out" });
			TweenMax.to(".box4-3", 3, { left: leftWidth, ease: "power3.out" });
		});

		document.querySelector('.choice4 .reset4').addEventListener('click', function(){
			TweenMax.to(['.box4-1, .box4-2, .box4-3'], 0, {left: 0});
		});
	</script>
</body>
</html>

 

Sample5

클릭하면 움직이는 GSAP 애니메이션 예제입니다.

결과
 
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>GSAP Animation</title>
	<style>
		/* option */
		.animation {
			background-color: #f7f7f7;
			border-radius: 3px;
			padding: 20px;
			counter-reset: items;
		}
		.box {
			position: relative;
			width: 60px; height: 60px; line-height: 60px;
			text-align: center; color: #fff; font-size: 12px;
			margin: 10px;
			border-radius: 50%;
			background-color: #A2CBFA;
			border: 1px solid #4390E1;
			box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
		}
		.box::before {
			counter-increment: items;
			content: counter(items);
		}
		.choice > a{    
			border: 1px solid #5f6368;
			padding: 7px 20px 5px 20px;
			display: inline-block;
			border-radius: 20px;
			text-decoration: none;
			margin: 3px;
		}
	</style>
</head>
<body>
	
	<div class="animation ani5">
		<div class="box box5"></div>
	</div>

	<div class="choice choice5">
		<a href="#" class="reset5">리셋</a>
		<a href="#" class="start5">클릭</a>
	</div>

	<!-- script -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> -->
	<script>
		document.querySelectorAll('.choice5 a').forEach(function(e){
			e.addEventListener('click',function(e){
				e.preventDefault();
			})
		});
		
		document.querySelector('.choice5 .start5').addEventListener('click', function(){
			TweenMax.to(".box5", 1, { left: "+=100", ease: "power3.out" });
		});

		document.querySelector('.choice5 .reset5').addEventListener('click', function(){
			TweenMax.to(".box5", 0, {left: 0});
		});
	</script>
</body>
</html>

 

Sample6

GSAP 반복 애니메이션 예제입니다.

결과
 
 
 
 
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>GSAP Animation</title>
	<style>
		/* option */
		.animation {
			background-color: #f7f7f7;
			border-radius: 3px;
			padding: 20px;
			counter-reset: items;
		}
		.box {
			position: relative;
			width: 60px; height: 60px; line-height: 60px;
			text-align: center; color: #fff; font-size: 12px;
			margin: 10px;
			border-radius: 50%;
			background-color: #A2CBFA;
			border: 1px solid #4390E1;
			box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
		}
		.box::before {
			counter-increment: items;
			content: counter(items);
		}
		.choice > a{    
			border: 1px solid #5f6368;
			padding: 7px 20px 5px 20px;
			display: inline-block;
			border-radius: 20px;
			text-decoration: none;
			margin: 3px;
		}
	</style>
</head>
<body>
	
	<div class="animation ani6">
		<div class="box box6-1"></div>
		<div class="box box6-2"></div>
		<div class="box box6-3"></div>
		<div class="box box6-4"></div>
	</div>

	<div class="choice choice6">
		<a href="#" class="reset6">리셋</a>
		<a href="#" class="start6-1">repeat</a>
		<a href="#" class="start6-2">repeatDelay</a>
		<a href="#" class="start6-3">yoyo</a>
		<a href="#" class="start6-4">infinity</a>
	</div>

	<!-- script -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
	<script>
		document.querySelectorAll('.choice6 a').forEach(function(e){
			e.addEventListener('click',function(e){
				e.preventDefault();
			})
		});
		const leftWidth = document.querySelector('.animation').offsetWidth - 110 + "px";

		document.querySelector('.choice6 .start6-1').addEventListener('click', function(){
			TweenMax.to(".box6-1", 1, { left: leftWidth, repeat: 1, ease : "power4.out" });
			TweenMax.to(".box6-2", 1, { left: leftWidth, repeat: 2, ease : "power4.out" });
			TweenMax.to(".box6-3", 1, { left: leftWidth, repeat: 3, ease : "power4.out" });
			TweenMax.to(".box6-4", 1, { left: leftWidth, repeat: 4, ease : "power4.out" });
		});

		document.querySelector('.choice6 .start6-2').addEventListener('click', function(){
			TweenMax.to(".box6-1", 1, { left: leftWidth, repeat: 1, ease : "power4.out" });
			TweenMax.to(".box6-2", 1, { left: leftWidth, repeat: 1, repeatDelay: 1, ease : "power4.out" });
			TweenMax.to(".box6-3", 1, { left: leftWidth, repeat: 1, repeatDelay: 2, ease : "power4.out" });
			TweenMax.to(".box6-4", 1, { left: leftWidth, repeat: 1, repeatDelay: 3, ease : "power4.out" });
		});

		document.querySelector('.choice6 .start6-3').addEventListener('click', function(){
			TweenMax.to(".box6-1", 1, { left: leftWidth, repeat: 1, yoyo: true, ease : "power4.out" });
			TweenMax.to(".box6-2", 1, { left: leftWidth, repeat: 2, yoyo: true, ease : "power4.out" });
			TweenMax.to(".box6-3", 1, { left: leftWidth, repeat: 3, yoyo: true, ease : "power4.out" });
			TweenMax.to(".box6-4", 1, { left: leftWidth, repeat: 4, yoyo: true, ease : "power4.out" });
		});
		document.querySelector('.choice6 .start6-4').addEventListener('click', function(){
			TweenMax.to(".box6-1", 1, { left: leftWidth, repeat: -1, yoyo: true, ease : "power4.out" });
			TweenMax.to(".box6-2", 1, { left: leftWidth, repeat: -1, yoyo: true, ease : "power4.out" });
			TweenMax.to(".box6-3", 1, { left: leftWidth, repeat: -1, yoyo: true, ease : "power4.out" });
			TweenMax.to(".box6-4", 1, { left: leftWidth, repeat: -1, yoyo: true, ease : "power4.out" });
		});

		document.querySelector('.choice6 .reset6').addEventListener('click', function(){
			TweenMax.to(['.box6-1, .box6-2, .box6-3, .box6-4'], 0, {left: 0});
		});
	</script>
</body>
</html>

 

Sample7

GSAP 콜백함수 애니메이션 예제입니다.

결과
 
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>GSAP Animation</title>
	<style>
		/* option */
		.animation {
			background-color: #f7f7f7;
			border-radius: 3px;
			padding: 20px;
			counter-reset: items;
		}
		.box {
			position: relative;
			width: 60px; height: 60px; line-height: 60px;
			text-align: center; color: #fff; font-size: 12px;
			margin: 10px;
			border-radius: 50%;
			background-color: #A2CBFA;
			border: 1px solid #4390E1;
			box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
		}
		.box::before {
			counter-increment: items;
			content: counter(items);
		}
		.choice > a{    
			border: 1px solid #5f6368;
			padding: 7px 20px 5px 20px;
			display: inline-block;
			border-radius: 20px;
			text-decoration: none;
			margin: 3px;
		}
	</style>
</head>
<body>
	
	<div class="animation ani7">
		<div class="box box7"></div>
	</div>

	<div class="choice choice7">
		<a href="#" class="start7">onComplete</a>
	</div>

	<!-- script -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
	<script>
		document.querySelectorAll('.choice7 a').forEach(function(e){
			e.addEventListener('click',function(e){
				e.preventDefault();
			})
		});
		const leftWidth = document.querySelector('.animation').offsetWidth - 110 + "px";

		document.querySelector('.choice7 .start7').addEventListener('click', function(){
			TweenMax.to(".box7", 1, { left: leftWidth, rotationX : "360deg", ease: "power3.out", onComplete: complete});
		});

		function complete(){
			TweenMax.to(".box7", 1, { left: "0", rotationX : "0deg"});
		}
	</script>
</body>
</html>

 

Sample8

GSAP 컨트롤 애니메이션 예제입니다.

TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>GSAP Animation</title>
	<style>
		/* option */
		.animation {
			background-color: #f7f7f7;
			border-radius: 3px;
			padding: 20px;
			counter-reset: items;
		}
		.box {
			position: relative;
			width: 60px; height: 60px; line-height: 60px;
			text-align: center; color: #fff; font-size: 12px;
			margin: 10px;
			border-radius: 50%;
			background-color: #A2CBFA;
			border: 1px solid #4390E1;
			box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
		}
		.box::before {
			counter-increment: items;
			content: counter(items);
		}
		.choice > a{    
			border: 1px solid #5f6368;
			padding: 7px 20px 5px 20px;
			display: inline-block;
			border-radius: 20px;
			text-decoration: none;
			margin: 3px;
		}
	</style>
</head>
<body>
	
	<div class="animation ani8">
		<div class="box box8"></div>
		<div class="box box8"></div>
		<div class="box box8"></div>
	</div>

	<div class="choice choice8">
		<a href="#" class="reset8">리셋</a>
		<a href="#" class="start8-1">play</a>
		<a href="#" class="start8-2">pause</a>
		<a href="#" class="start8-3">resume</a>
		<a href="#" class="start8-4">reverse</a>
		<a href="#" class="start8-5">seek(0.5)</a>
		<a href="#" class="start8-6">timeScale(0.5)</a>
		<a href="#" class="start8-7">timeScale(2)</a>
		<a href="#" class="start8-8">kill()</a>
		<a href="#" class="start8-9">restart()</a>
	</div>

	<!-- script -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
	<script>
		document.querySelectorAll('.choice8 a').forEach(function(e){
			e.addEventListener('click',function(e){
				e.preventDefault();
			})
		});
		const leftWidth = document.querySelector('.animation').offsetWidth - 110 + "px";
		const tween = TweenMax.to(".box8", 10, { left: leftWidth, borderRadius: "0%", rotation: "720deg"});
		tween.pause()

		// document.querySelector('.start8-1').addEventListener('click', function(){tween.play()});
		// document.querySelector('.start8-2').addEventListener('click', function(){tween.pause()});
		// document.querySelector('.start8-3').addEventListener('click', function(){tween.resume()});
		// document.querySelector('.start8-4').addEventListener('click', function(){tween.reverse()});
		// document.querySelector('.start8-5').addEventListener('click', function(){tween.seek(0.5)});
		// document.querySelector('.start8-6').addEventListener('click', function(){tween.timeScale(0.5)});
		// document.querySelector('.start8-7').addEventListener('click', function(){tween.timeScale(2)});
		// document.querySelector('.start8-8').addEventListener('click', function(){tween.kill()});
		// document.querySelector('.start8-9').addEventListener('click', function(){tween.restart()});

		document.querySelector(".start8-1").onclick = () => tween.play();
		document.querySelector(".start8-2").onclick = () => tween.pause();
		document.querySelector(".start8-3").onclick = () => tween.resume();
		document.querySelector(".start8-4").onclick = () => tween.reverse();
		document.querySelector(".start8-5").onclick = () => tween.seek(0.5);
		document.querySelector(".start8-6").onclick = () => tween.timeScale(0.5);
		document.querySelector(".start8-7").onclick = () => tween.timeScale(2);
		document.querySelector(".start8-8").onclick = () => tween.kill();
		document.querySelector(".start8-9").onclick = () => tween.restart();

		document.querySelector('.reset8').addEventListener('click', function(){
			TweenMax.to(".box8", 0, { left: "0", borderRadius: "50%", rotation: "0"});
		});
	</script>
</body>
</html>

 

Sample9

GSAP stagger 애니메이션 예제입니다.

결과
 
 
 
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>GSAP Animation</title>
	<style>
		/* option */
		.animation {
			background-color: #f7f7f7;
			border-radius: 3px;
			padding: 20px;
			counter-reset: items;
		}
		.box {
			position: relative;
			width: 60px; height: 60px; line-height: 60px;
			text-align: center; color: #fff; font-size: 12px;
			margin: 10px;
			border-radius: 50%;
			background-color: #A2CBFA;
			border: 1px solid #4390E1;
			box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
		}
		.box::before {
			counter-increment: items;
			content: counter(items);
		}
		.choice > a{    
			border: 1px solid #5f6368;
			padding: 7px 20px 5px 20px;
			display: inline-block;
			border-radius: 20px;
			text-decoration: none;
			margin: 3px;
		}
	</style>
</head>
<body>
	
	<div class="animation ani9">
		<div class="box box9-1"></div>
		<div class="box box9-2"></div>
		<div class="box box9-3"></div>
	</div>

	<div class="choice choice9">
		<a href="#" class="reset9">리셋</a>
		<a href="#" class="start9-1">stagger1</a>
		<a href="#" class="start9-2">stagger2</a>
	</div>

	<!-- script -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
	<script>
		document.querySelectorAll('.choice9 a').forEach(function(e){
			e.addEventListener('click',function(e){
				e.preventDefault();
			})
		});
		const leftWidth = document.querySelector('.animation').offsetWidth - 110 + "px";

		document.querySelector('.start9-1').addEventListener('click', function(){
			TweenMax.staggerTo([".box9-1",".box9-2",".box9-3"], 1, { left: leftWidth , ease : "power3.out" }, 0.25);
		});
		document.querySelector('.start9-2').addEventListener('click', function(){
			TweenMax.staggerTo([".box9-1",".box9-2",".box9-3"], 1, { left: leftWidth, scale:.2, rotationY: "800deg", repeat: 5, yoyo: true, ease : "power1.out" }, 0.25);
		});
		document.querySelector('.reset9').addEventListener('click', function(){
			TweenMax.to([".box9-1, .box9-2, .box9-3"], 0, { left: "0" });
		});
	</script>
</body>
</html>

 

Sample10

GSAP timeline 애니메이션 예제입니다.

TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>GSAP Animation</title>
	<style>
		/* option */
		.animation {
			background-color: #f7f7f7;
			border-radius: 3px;
			padding: 20px;
			counter-reset: items;
		}
		.box {
			position: relative;
			width: 60px; height: 60px; line-height: 60px;
			text-align: center; color: #fff; font-size: 12px;
			margin: 10px;
			border-radius: 50%;
			background-color: #A2CBFA;
			border: 1px solid #4390E1;
			box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
		}
		.box::before {
			counter-increment: items;
			content: counter(items);
		}
		.choice > a{    
			border: 1px solid #5f6368;
			padding: 7px 20px 5px 20px;
			display: inline-block;
			border-radius: 20px;
			text-decoration: none;
			margin: 3px;
		}
	</style>
</head>
<body>
	
	<div class="animation ani10">
		<div class="box box10"></div>
	</div>

	<div class="choice choice10">
		<a href="#" class="reset10">리셋</a>
		<a href="#" class="start10-1">Timeline1</a>
		<a href="#" class="start10-2">Timeline2</a>
		<a href="#" class="start10-3">Timeline3</a>
	</div>

	<!-- script -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
	<script>
		document.querySelectorAll('.choice9 a').forEach(function(e){
			e.addEventListener('click',function(e){
				e.preventDefault();
			})
		});
		const leftWidth = document.querySelector('.animation').offsetWidth - 110 + "px";

		$(".start10-1").click(function(){
			$('.box10')
				.animate({ left: leftWidth}, 500)
				.animate({ height: "300px"}, 500, "easeOutQuad")
				.animate({ opacity: "0.5", borderRadius: "0%"}, 500, "easeOutElastic")
				.animate({ height: "60px"}, 500, "easeOutQuad")
				.animate({ opacity: "1", left: "0", borderRadius: "50%"}, 500)
		});
		document.querySelector('.start10-2').addEventListener('click', function(){
			let tl = new TimelineLite();
			tl.to(".box10", 0.5, {left: leftWidth});
			tl.to(".box10", 0.5, {height: "300px", ease : "power4.out"});
			tl.to(".box10", 0.5, {opacity: "0.5", borderRadius: "0", ease : "power2.out"});
			tl.to(".box10", 0.5, {height: "60px", ease : "power2.out"});
			tl.to(".box10", 0.5, {opacity: "1", left: "0", borderRadius: "50%"});
		});
		document.querySelector('.start10-3').addEventListener('click', function(){
			const tl = new TimelineLite();
			tl.to(".box10", 1, {left: leftWidth, scale: "0.5", rotation:"100deg" });
			tl.to(".box10", 2, {left: "0%", opacity: 0.5, skewY: "720deg", rotation:"300deg", scale: "1" });
			tl.to(".box10", 1, {left: leftWidth, rotation:"1000deg" , borderRadius: "0%", scale: "0.5", backgroundImage: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"});
			tl.to(".box10", 1, {rotation:"-2000deg"});
			tl.to(".box10", 1, {opacity:1, left: "0", scale: "1", rotation:"-0deg", borderRadius: "50%", backgroundImage: "none"});
		});
		document.querySelector('.reset10').addEventListener('click', function(){
			TweenMax.to("box10", 0, { left: "0" });
		});
	</script>
</body>
</html>

AD

comments