GSAP Animation
사이트 : https://greensock.com/
CDN : <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
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
//jQuery
$(".btn2").on("click",function(){
$(".box2").animate({ left : "+=100"},"slow","easeOutQuint")
});
//TweenMax
$(".btn2").on("click",function(){
TweenMax.to(".box2", 1, { left : "+=100px"});
});
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 : "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
box
box
$(".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 : 다양한 움직임 ease view Start
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-radius Start
box
$(".btn9").on("click",function(){
TweenMax.to(".box9", 1, { left : "90%", borderRadius: "0%", ease:Power2.easeOut });
});
skew, rotate Start
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 });
});
CSS Start
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});
});
RotationX Start
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.set Start
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%" });
});
Transform Start
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: 620, x:10, y:10, z:0 });
});
TransformOrigin Start
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" });
});
autoAlpha Start
box
$(".btn16").on("click",function(){
TweenMax.to(".box16_1", 2, { left : "90%", rotation: 720, autoAlpha: 0, ease:Sine.easeOut });
});
Rotation Start
box
box
box
$(".btn17").on("click",function(){
TweenMax.to(".box17_1", 2, { left : "+=100", rotation: "-=170" });
TweenMax.to(".box17_2", 2, { left : "+=100", rotationX: "-=30_cw"});
TweenMax.to(".box17_3", 2, { left : "+=100", rotationY: "-=150_cw"});
});
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);
});
HoverEffect
See the Pen Button Over Effect by ilim1908 (@ilim1908) on CodePen.
SVG TweenMax Animation
See the Pen SVG TweenMax Animation by ilim1908 (@ilim1908) on CodePen.
Rocket Animation
See the Pen Rocket Animation TweenMax by ilim1908 (@ilim1908) on CodePen.