GSAP Animation

사이트 : https://greensock.com
CDN : <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"><script>

TweenMax.to(target, duration, {vars});

Position : 버튼 클릭하면 오른쪽으로 이동하기 Start

box

//jQuery
$(".btn1").on("click",function(){
	$(".box1_1,.box1_2,.box1_3").animate({ left: "90%" },1000);
});
//TweenMax
$(".btn1").on("click",function(){
	TweenMax.to([".box1_1",".box1_2",".box1_3"],1,{ left: "90%" });
});

Position : 버튼을 클릭하면 오른쪽으로 100px씩 움직이기 Start

box

//jQuery
$(".btn2").on("click",function(){
	$(".box2").animate({ left: "+=100px" },"slow","easeOutQuint");
});
//TweenMax
$(".btn2").on("click",function(){
	TweenMax.to(".box2",1,{ left: "+=100px" });
});

Background-imgae : 버튼을 클릭하면 백그라운드 이미지 색을 변경하면서 오른쪽으로 이동하기 Start

box

$(".btn3").on("click",function(){
	TweenMax.to(".box3",2,{ left: "90%", backgroundImage: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)" });
});

Opacity : 오른쪽으로 이동하면서 투명도 조절하기 Start

box

//jQuery
$(".btn4").on("click",function(){
	$(".box4").animate({ left: "90%", opacity: "0.1" },1000);
});
//TweenMax
$(".btn4").on("click",function(){
	TweenMax.to(".box4",1,{ left: "90%", opacity: "0.1" });
});

scale : 오른쪽으로 이동하면서 두배로 확대하기 Start

box

//jQuery
$(".btn5").on("click",function(){
	$(".box5").animate({ left: "90%", width: "120px", height: "120px" },1000);
});
//TweenMax
$(".btn5").on("click",function(){
	TweenMax.to(".box5",1,{ left: "90%", scale: "2" });
});

delay : 1초 간격으로 움직이기 Start

box

//jQuery : JS Animation 참고
//TweenMax
$(".btn6").on("click",function(){
	TweenMax.to(".box6_1",1,{ left: "90%", delay: 1 });
	TweenMax.to(".box6_2",1,{ left: "90%", delay: 2 });
	TweenMax.to(".box6_3",1,{ left: "90%", delay: 3 });
});

Callback : 콜백함수 활용하기 Start

box

//jQuery : JS Animation 참고
//TweenMax
$(".btn7").on("click",function(){
	TweenMax.to(".box7",1,{ left: "90%", onComplete:myFunction });
});
function myFunction(){
	alert("도착했습니다.");
}

easing : 다양한 움직임 ease view Start

Power0

Power1

Power2

Power3

Power4

Bounce

RoughEase

SlowMo

Circ

Expo

Sine

//jQuery : JS Animation 참고
//TweenMax	
$(".btn8").on("click",function(){
	TweenMax.to(".box8_1",1,{ left: "90%", ease: Power0.easeOut });
	TweenMax.to(".box8_2",1,{ left: "90%", ease: Power1.easeOut });
	TweenMax.to(".box8_3",1,{ left: "90%", ease: Power2.easeOut });
	TweenMax.to(".box8_4",1,{ left: "90%", ease: Power3.easeOut });
	TweenMax.to(".box8_5",1,{ left: "90%", ease: Power4.easeOut });
	TweenMax.to(".box8_6",1,{ left: "90%", ease: Bounce.easeOut });
	TweenMax.to(".box8_7",1,{ left: "90%", ease: RoughEase.easeOut });
	TweenMax.to(".box8_8",1,{ left: "90%", ease: SlowMo.easeOut });
	TweenMax.to(".box8_9", 1, { left: "90%", ease: Circ.easeOut });
	TweenMax.to(".box8_10", 1, { left: "90%", ease: Expo.easeOut });
	TweenMax.to(".box8_11", 1, { left: "90%", ease: Sine.easeOut });
});

border-radius Start

box

$(".btn9").on("click",function(){
	TweenMax.to(".box9",1,{ left: "90%", borderRadius: "0%", ease: Power2.easeOut });
});

skew, rotate Start

box

$(".btn10").on("click",function(){
	TweenMax.to(".box10_1",1,{ left: "90%", rotation: "360deg" });
	TweenMax.to(".box10_2",1,{ left: "90%", rotation: "7.54rad" });
	TweenMax.to(".box10_3",1,{ left: "90%", rotation: 360 });
	TweenMax.to(".box10_4",1,{ left: "90%", rotation: "360deg", skewX: "30deg" });
	TweenMax.to(".box10_5",1,{ left: "90%", rotation: "360deg", skewX: "30deg", ease: Expo.easeOut });
});

CSS Start

box

$(".btn11").on("click",function(){
	TweenMax.to(".box11_1",1,{ left: "90%", width: "100px", ease: SlowMo.easeOut });
	TweenMax.to(".box11_2",1,{ left: "90%", height: "100px", ease: SlowMo.easeOut });
	TweenMax.to(".box11_3",1,{ css: { left: "90%", width: "100px" }, ease: SlowMo.easeOut });
	TweenMax.to(".box11_4",1,{ css: { left: "90%", height: "100px" }, ease: SlowMo.easeOut });
});

RotationX Start

box

$(".btn12").on("click",function(){
	TweenMax.to(".box12_1",2,{ left: "90%", rotationX: 800, ease: SteppedEase.easeOut });
	TweenMax.to(".box12_2",2,{ left: "90%",  rotationY: 800, ease: SteppedEase.easeOut });
	TweenMax.to(".box12_3",2,{ left: "90%",  rotationZ: 800, ease: SteppedEase.easeOut });
});

TweenMax.set Start

box

$(".btn13").on("click",function(){
	TweenMax.set(".box13_1",{ left: "90%" });
	TweenMax.set(".box13_2",{ left: "80%" });
	TweenMax.set(".box13_3",{ left: "70%" });
});

Transform Start

box

$(".btn14").on("click",function(){
	//css {transform: scale(1.5) rotateY(465deg) translate3d(10px, 10px, 10px)}
	TweenMax.to(".box14_1",2,{ left: "90%", scale: 1.5, rotationY: 465, x: 10, y: 10, z: 0 });
	TweenMax.to(".box14_2",2,{ left: "90%", transformPerspective: 500, rotation: 620,  x: 10, y: 10, z: 0 });
});

TransformOrigin Start

box

$(".btn15").on("click",function(){
	TweenMax.to(".box15_1",2,{ left: "90%", rotation: 720 });
	TweenMax.to(".box15_2",2,{ left: "90%", rotation: 720, transformOrigin: "left top" });
	TweenMax.to(".box15_3",2,{ left: "90%", rotation: 720, transformOrigin: "50px 200px" });
});

autoAlpha Start

box

$(".btn16").on("click",function(){
	TweenMax.to(".box16",2,{ left: "90%", rotation: 720, autoAlpha: 0, ease: Sine.easeOut });
});

Rotation Start

box

$(".btn17").on("click",function(){
	TweenMax.to(".box17_1",2,{ left: "+=100", rotation: "-=170" });
	TweenMax.to(".box17_2",2,{ left: "+=100", rotation: "-=30_cw" });
	TweenMax.to(".box17_3",2,{ left: "+=100", rotation: "-=150_cw" });
});

addClass Start

box

$(".btn18").on("click",function(){
	TweenMax.to(".box18_1",2,{ className: "class" });
	TweenMax.to(".box18_2",2,{ className: "+=class" });
});

Event Start Pause Resume Reverse Seek Scale Scale(2) Kill Restart

box

var tween = TweenMax.to(".box19",10,{ left: "90%", repeat: -1, yoyo: true, ease: Power0.easeOut });
$(".btn19-1").click(function(){ tween.play() });
$(".btn19-2").click(function(){ tween.pause() });
$(".btn19-3").click(function(){ tween.resume() });
$(".btn19-4").click(function(){ tween.reverse() });
$(".btn19-5").click(function(){ tween.seek(0.5) });
$(".btn19-6").click(function(){ tween.timeScale(9.5) });
$(".btn19-7").click(function(){ tween.timeScale(2) });
$(".btn19-8").click(function(){ tween.kill() });
$(".btn19-9").click(function(){ tween.restart() });

Timeline Start

box

$(".btn20").on("click",function(){
	var tl = new TimelineLite();
	tl.to(".box20",1,{ left: "90%" });
	tl.to(".box20",1,{ height: 300, ease: Elastic.easeOut });
	tl.to(".box20",1,{ opacity: 0.5 });
	tl.to(".box20",1,{ height: 60, ease: Elastic.easeOut });
	tl.to(".box20",1,{ opacity: 1, left: "0" });
});

repeat Start

box

$(".btn21").on("click",function(){
	TweenMax.to(".box21_1",2,{ left: "90%", repeat: 1, ease: Power4.easeOut });
	TweenMax.to(".box21_2",2,{ left: "90%", repeat: 1, repeatDelay: 1, ease: Power4.easeOut });
	TweenMax.to(".box21_3",2,{ left: "90%", repeat: 1, yoyo: true, ease: Power4.easeOut });		//원래 자리로 돌아옴
	TweenMax.to(".box21_4",2,{ left: "90%", repeat: -1,  yoyo: true, ease: Power4.easeOut });		//무한반복
});

stagger Start

box

$(".btn22").on("click",function(){
	TweenMax.staggerTo([".box22_1",".box22_2",".box22_3",".box22_4"],1,{ left:"90%", ease:Power4.easeOut },0.25);
});

Mouse Cursor

See the Pen Mouse Cursor by alflal4 (@alflal4) on CodePen.

Professional web publishers

http://alflal4.dothome.co.kr/