티스토리 뷰

GSAP

[GSAP] GSAP 사용하기

Transform

Transform을 이용한 애니메이션입니다.


Transform

Transform을 이용한 애니메이션입니다.

문법(Syntax)

TweenMax.to("target", duration, vars);

1. Scale

버튼을 클릭하면 스케일이 커지는 애니메이션입니다. 제이쿼리는 animate에서 scale이 작동하지 않고 CSS에서만 작동합니다.

JQUERY
$(".start").on("click",function(){
	$(".box1").animate({ left: "80%" }, 1000);
	$(".box1").css({ transform: "scale(3)" });
}); 
$(".reset").on("click",function(){
	$(".box1").animate({ left: "0" }, 0);
	$(".box1").css({ transform: "scale(1)" });
});
GSAP
$(".start").on("click",function(){
	TweenMax.to(".box1", 1, { left:"90%", scale:"3" });
});  
$(".reset").on("click",function(){
	TweenMax.to(".box1", 0, { left: "0", scale:"1" });
});  
JAVASCRIPT
const startBtn = document.querySelector('.start');
const resetBtn = document.querySelector('.reset');

startBtn.addEventListener('click', moveStart);
resetBtn.addEventListener('click', moveReset);

function moveStart(){
	TweenMax.to(".box1", 1, { left:"90%", scale:"3" });
}
function moveReset(){
	TweenMax.to(".box1", 0, { left: "0", scale:"1" });
}
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>GSAP</title>
	<style>
		.box_wrap {width: 100%;}
		.box_wrap div {
			display: block; width: 60px; height: 60px; line-height: 65px; text-align: center; 
			border-radius: 50%; overflow: hidden; position: relative; font-size: 12px; color: #fff; margin: 4px;
			background-image: linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%);
		}
	</style>
</head>
<body>
	<div class="box_wrap">
		<div class="box1">box</div>
	</div>

	<div class="choice">
		<a href="#" class="reset">리셋</a>
		<a href="#" class="start">클릭하면 오른쪽으로 이동합니다.</a>
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
	<script>
		$(".choice a").on("click",function(e){
			e.preventDefault();
		});

		//jquery
		// $(".start").on("click",function(){
		//     $(".box1").animate({ left: "80%" }, 1000);
		//     $(".box1").css({ transform: "scale(3)" });
		// }); 
		// $(".reset").on("click",function(){
		//     $(".box1").animate({ left: "0" }, 0);
		//     $(".box1").css({ transform: "scale(1)" });
		});

		//gsap
		// $(".start").on("click",function(){
		//     TweenMax.to(".box1", 1, { left:"90%", scale:"3" });
		// });  
		// $(".reset").on("click",function(){
		//     TweenMax.to(".box1", 0, { left: "0", scale:"1" });
		// });  
	
		//javascript
		const startBtn = document.querySelector('.start');
		const resetBtn = document.querySelector('.reset');

		startBtn.addEventListener('click', moveStart);
		resetBtn.addEventListener('click', moveReset);
		
		function moveStart(){
			TweenMax.to(".box1", 1, { left:"90%", scale:"3" });
		}
		function moveReset(){
			TweenMax.to(".box1", 0, { left: "0", scale:"1" });
		}
	</script>
</body>
</html>

2. Border-radius

버튼을 클릭하면 스케일이 커지는 애니메이션입니다. 제이쿼리는 animate에서 Border-radius이 작동합니다.

JQUERY
$(".startJ").on("click",function(){
	$(".box1").animate({ left: "80%", borderRadius: "0%" }, 2000);
}); 
$(".reset").on("click",function(){
	$(".box1").animate({ left: "0", borderRadius: "50%" }, 0);
});
GSAP
$(".start").on("click",function(){
	TweenMax.to(".box1", 2, { left: "80%", borderRadius: "0%" });
});  
$(".reset").on("click",function(){
	TweenMax.to(".box1", 0, { left: "0", borderRadius: "50%" });
}); 
JAVASCRIPT
const startBtn = document.querySelector('.start');
const resetBtn = document.querySelector('.reset');

startBtn.addEventListener('click', moveStart);
resetBtn.addEventListener('click', moveReset);

function moveStart(){
	TweenMax.to(".box1", 2, { left: "80%", borderRadius: "0%" });
}
function moveReset(){
	TweenMax.to(".box1", 0, { left: "0", borderRadius: "50%" });
}
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>GSAP</title>
	<style>
		.box_wrap {width: 100%;}
		.box_wrap div {
			display: block; width: 60px; height: 60px; line-height: 65px; text-align: center; 
			border-radius: 50%; overflow: hidden; position: relative; font-size: 12px; color: #fff; margin: 4px;
			background-image: linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%);
		}
	</style>
</head>
<body>
	<div class="box_wrap">
		<div class="box1">box</div>
	</div>

	<div class="choice">
		<a href="#" class="reset">리셋</a>
		<a href="#" class="startJ">[jQuery] 클릭하면 테두리 굴곡이 변경됩니다.</a>
		<a href="#" class="start">[GSAP] 클릭하면 테두리 굴곡이 변경됩니다.</a>
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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();
		});

		//jquery
		$(".startJ").on("click",function(){
			$(".box1").animate({ left: "80%", borderRadius: "0%" }, 2000);
		}); 
		// $(".reset").on("click",function(){
		//     $(".box1").animate({ left: "0", borderRadius: "50%" }, 0);
		// });

		//gsap
		// $(".start").on("click",function(){
		//     TweenMax.to(".box1", 2, { left: "80%", borderRadius: "0%" });
		// });  
		// $(".reset").on("click",function(){
		//     TweenMax.to(".box1", 0, { left: "0", borderRadius: "50%" });
		// });  
	
		//javascript
		const startBtn = document.querySelector('.start');
		const resetBtn = document.querySelector('.reset');

		startBtn.addEventListener('click', moveStart);
		resetBtn.addEventListener('click', moveReset);
		
		function moveStart(){
			TweenMax.to(".box1", 2, { left: "80%", borderRadius: "0%" });
		}
		function moveReset(){
			TweenMax.to(".box1", 0, { left: "0", borderRadius: "50%" });
		}
	</script>
</body>
</html>

3. Skew

버튼을 클릭하면 기울기가 변하는 애니메이션입니다.

JQUERY
$(".startJ").on("click",function(){
	$(".box1").animate({ left: "80%"}, 2000).css({ transform: "skewX(30deg)"});
	$(".box2").animate({ left: "80%"}, 2000).css({ transform: "skewX(330deg)"});
	$(".box3").animate({ left: "80%"}, 2000).css({ transform: "skewX(660deg)"});
}); 
$(".reset").on("click",function(){
	$(".box1").animate({ left: "0"}, 0).css({ transform: "skewX(0deg)"});
	$(".box2").animate({ left: "0"}, 0).css({ transform: "skewX(0deg)"});
	$(".box3").animate({ left: "0"}, 0).css({ transform: "skewX(0deg)"});
});
GSAP
$(".start").on("click",function(){
	TweenMax.to(".box1", 2, { left: "80%", skewX:"30deg" });
	TweenMax.to(".box2", 2, { left: "80%", skewX:"330deg" });
	TweenMax.to(".box3", 2, { left: "80%", skewX:"660deg" });
});  
$(".choice .reset").on("click",function(){
	TweenMax.to([".box1",".box2",".box3"], 0, { left: "0", skewX: "0deg" });
}); 
JAVASCRIPT
const startBtn = document.querySelector('.start');
const resetBtn = document.querySelector('.reset');

startBtn.addEventListener('click', moveStart);
resetBtn.addEventListener('click', moveReset);

function moveStart(){
	TweenMax.to(".box1", 2, { left: "80%", skewX:"30deg" });
	TweenMax.to(".box2", 2, { left: "80%", skewX:"330deg" });
	TweenMax.to(".box3", 2, { left: "80%", skewX:"660deg" });
}
function moveReset(){
	TweenMax.to([".box1",".box2",".box3"], 0, { left: "0", skewX: "0deg" });
}
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>GSAP</title>
	<style>
		.box_wrap {width: 100%;}
		.box_wrap div {
			display: block; width: 60px; height: 60px; line-height: 65px; text-align: center; 
			border-radius: 50%; overflow: hidden; position: relative; font-size: 12px; color: #fff; margin: 4px;
			background-image: linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%);
		}
	</style>
</head>
<body>
	<div class="box_wrap">
		<div class="box1">box</div>
		<div class="box2">box</div>
		<div class="box3">box</div>
	</div>

	<div class="choice">
		<a href="#" class="reset">리셋</a>
		<a href="#" class="startJ">[jQuery] 클릭하면 이동합니다.</a>
		<a href="#" class="start">[GSAP] 클릭하면 이동합니다.</a>
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
	<script>
		$(".choice a").on("click",function(e){
			e.preventDefault();
		});

		//jquery
		$(".startJ").on("click",function(){
			$(".box1").animate({ left: "80%"}, 2000).css({ transform: "skewX(30deg)"});
			$(".box2").animate({ left: "80%"}, 2000).css({ transform: "skewX(330deg)"});
			$(".box3").animate({ left: "80%"}, 2000).css({ transform: "skewX(660deg)"});
		}); 
		$(".reset").on("click",function(){
			$(".box1").animate({ left: "0"}, 0).css({ transform: "skewX(0deg)"});
			$(".box2").animate({ left: "0"}, 0).css({ transform: "skewX(0deg)"});
			$(".box3").animate({ left: "0"}, 0).css({ transform: "skewX(0deg)"});
		});

		//gsap
		// $(".start").on("click",function(){
		//     TweenMax.to(".box1", 2, { left: "80%", skewX:"30deg" });
		//     TweenMax.to(".box2", 2, { left: "80%", skewX:"330deg" });
		//     TweenMax.to(".box3", 2, { left: "80%", skewX:"660deg" });
		// });  
		// $(".choice .reset").on("click",function(){
		//     TweenMax.to([".box1",".box2",".box3"], 0, { left: "0", skewX: "0deg" });
		// });  
	
		//javascript
		const startBtn = document.querySelector('.start');
		const resetBtn = document.querySelector('.reset');

		startBtn.addEventListener('click', moveStart);
		resetBtn.addEventListener('click', moveReset);
		
		function moveStart(){
			TweenMax.to(".box1", 2, { left: "80%", skewX:"30deg" });
			TweenMax.to(".box2", 2, { left: "80%", skewX:"330deg" });
			TweenMax.to(".box3", 2, { left: "80%", skewX:"660deg" });
		}
		// function moveReset(){
		//     TweenMax.to([".box1",".box2",".box3"], 0, { left: "0", skewX: "0deg" });
		// }
	</script>
</body>
</html>

4. Rotate

버튼을 클릭하면 기울기가 변하는 애니메이션입니다. 제이쿼리 animate에서는 rotate가 적용되지 않습니다.

JQUERY
$(".startJ").on("click",function(){
	$(".box1").animate({ left: "80%" }, 2000).css({ transform: "rotate(30deg)" });
	$(".box2").animate({ left: "80%" }, 2000).css({ transform: "rotate(60deg)" });
	$(".box3").animate({ left: "80%" }, 2000).css({ transform: "rotate(90deg)" });
}); 
$(".reset").on("click",function(){
	$(".box1, .box2, .box3").animate({ left: "0"}, 0).css({ transform: "rotate(0deg)"});
});
GSAP
$(".start").on("click",function(){
	TweenMax.to(".box1", 2, { left:"90%", rotation: "30deg" });
	TweenMax.to(".box2", 2, { left:"90%", rotation: "8rad" });
	TweenMax.to(".box3", 2, { left:"90%", rotation: "630" });
});  
$(".reset").on("click",function(){
	TweenMax.to([".box1",".box2",".box3"], 0, { left: "0", skewX: "0deg" });
});  
JAVASCRIPT
const startBtn = document.querySelector('.start');
const resetBtn = document.querySelector('.reset');

startBtn.addEventListener('click', moveStart);
resetBtn.addEventListener('click', moveReset);

function moveStart(){
	TweenMax.to(".box1", 2, { left:"90%", rotation: "30deg" });
	TweenMax.to(".box2", 2, { left:"90%", rotation: "8rad" });
	TweenMax.to(".box3", 2, { left:"90%", rotation: "630" });
}
function moveReset(){
	TweenMax.to([".box1",".box2",".box3"], 0, { left: "0", skewX: "0deg" });
}
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>GSAP</title>
	<style>
		.box_wrap {width: 100%;}
		.box_wrap div {
			display: block; width: 60px; height: 60px; line-height: 65px; text-align: center; 
			border-radius: 50%; overflow: hidden; position: relative; font-size: 12px; color: #fff; margin: 4px;
			background-image: linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%);
		}
	</style>
</head>
<body>
	<div class="box_wrap">
		<div class="box1">box</div>
		<div class="box2">box</div>
		<div class="box3">box</div>
	</div>

	<div class="choice">
		<a href="#" class="reset">리셋</a>
		<a href="#" class="startJ">[jQuery] 클릭하면 회전하면서 이동합니다.</a>
		<a href="#" class="start">[GSAP] 클릭하면 회전하면서 이동합니다.</a>
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
	<script>
		$(".choice a").on("click",function(e){
			e.preventDefault();
		});

		//jquery
		$(".startJ").on("click",function(){
			$(".box1").animate({ left: "80%" }, 2000).css({ transform: "rotate(30deg)" });
			$(".box2").animate({ left: "80%" }, 2000).css({ transform: "rotate(60deg)" });
			$(".box3").animate({ left: "80%" }, 2000).css({ transform: "rotate(90deg)" });
		}); 
		// $(".reset").on("click",function(){
		//     $(".box1, .box2, .box3").animate({ left: "0"}, 0).css({ transform: "rotate(0deg)"});
		// });

		//gsap
		// $(".start").on("click",function(){
		//     TweenMax.to(".box1", 2, { left:"90%", rotation: "30deg" });
		//     TweenMax.to(".box2", 2, { left:"90%", rotation: "8rad" });
		//     TweenMax.to(".box3", 2, { left:"90%", rotation: "630" });
		// });  
		// $(".reset").on("click",function(){
		//     TweenMax.to([".box1",".box2",".box3"], 0, { left: "0", skewX: "0deg" });
		// });  
	
		//javascript
		const startBtn = document.querySelector('.start');
		const resetBtn = document.querySelector('.reset');

		startBtn.addEventListener('click', moveStart);
		resetBtn.addEventListener('click', moveReset);
		
		function moveStart(){
			TweenMax.to(".box1", 2, { left:"90%", rotation: "30deg" });
			TweenMax.to(".box2", 2, { left:"90%", rotation: "8rad" });
			TweenMax.to(".box3", 2, { left:"90%", rotation: "630" });
		}
		function moveReset(){
			TweenMax.to([".box1",".box2",".box3"], 0, { left: "0", rotation: "0deg" });
		}
	</script>
</body>
</html>

공유하기(Share) 더보기

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

공감하기(Like) 더보기

UP NEXT : Ads by Google

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