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
box
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
$(".btn2").on("click",function(){
	TweenMax.to(".box2",1,{left:"+=100"});
});

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

box
$(".btn3").on("click",function(){
	TweenMax.to(".box3",2,{left:"90%", backgroundImage: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"});
});

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

box
//jQuery
$(".btn4").on("click",function(){
	$(".box4").animate({ left : "+=100", 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
box
box
//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
$(".btn7").on("click",function(){
	TweenMax.to(".box7",1,{left:"90%", onComplete:myFunction});
});

function myFunction(){
	alert("도착했습니다");
}

easing : 다양한 움직임Start

ease view
box
box
box
box
box
box
box
box
box
box
box
$(".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-radiusStart

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

skewX, rotateStart

box
box
box
box
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});
});

CSSStart

box
box
box
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});
});

RotationXStart

box
box
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.setStart

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

TransformStart

box
box
$(".btn14").on("click",function(){
	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: 120, x:10, y:10, z:0 });
});

TransformOriginStart

box
box
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" });
});

autoAlphaStart

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

RotationStart

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

addClass Start

box
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%", ease:Expo.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
box
box
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.easeOu});
	TweenMax.to(".box21_4", 2, { left:"90%", repeat:-1, yoyo:true,  ease:Power4.easeOu});
});

stagger Start

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

Button Hover Effect

See the Pen Button Hover Effect : TweenMax by wognsl305 (@wognsl305) on CodePen.

Basic Animation

See the Pen SVG TweenMax Animation by wognsl305 (@wognsl305) on CodePen.

Rocket Animation TweenMax

See the Pen Rocket Animation TweenMax by wognsl305 (@wognsl305) on CodePen.

Mouse Cursor

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