tweenmax sample code
Gsap graphic javascript library tweenmax / sample code
자바스크립트 그래픽 라이브러리 트윈맥스 코드 샘플
//TweenMax.from($('.item01'), 5,{opacity:0});
function animate1(){
TweenMax.from( $( ".item01" ), 5, { opacity: 0 } );
}
function animate2(){
TweenMax.from( $( ".item02" ), 1, { rotation: 180, x:100, ease:Elastic.easeOut } );
}
function animate3(){
TweenMax.to(".item03", 1, {
scale: function(){
return Math.random()*1.2;
},
rotation: function(){
return Math.random()*360;
}
});
}
function animate4(){
TweenMax.fromTo(".item04",1,{x:10, delay:1}, {x:50, y:30});
}
function animate5(){
move = TweenMax.to(".item05", 1 , {x:100, rotation:180, scale:1.5});
//after 1 second into the 3-second animations
TweenMax.delayedCall(1, reverse)
function reverse(){
move.reverse();
}
}
function animate6(){
// item06 : repeat:-1
var box = document.getElementById("item06"),
count = 0,
tween;
tween = TweenMax.to(box, 2, {x:100, repeat:10, yoyo:true, onRepeat:onRepeat, repeatDelay:0.5, ease:Linear.easeNone});
function onRepeat() {
count++;
box.innerHTML = count;
TweenLite.set(box, {backgroundColor:"hsl(" + Math.random() * 255 + ", 90%, 60%)"});
}
}
function animate7(){
// item07 : repeat:-1
TweenMax.to(".item07",1,{x:50, yoyo:true, repeat:-1});
}
function animate8(){
// item08 : play
var box8 = $('.item08');
tween = new TimelineLite();
tween.to(box8, 1, {x:30});
tween.to(box8, 1, {y:30});
tween.to(box8, 1, {x:0, y:0, backgroundColor:'#aaa'});
}
function animate9(){
// item09 : same animation play
var box1 = $('.item09_1');
var box2 = $('.item09_2');
var box3 = $('.item09_3');
tween = new TimelineLite();
tween.staggerTo([box1,box2,box3], 1, {rotation:180},0.5);
}
function animate10(){
// item10 : same animation play yoyo // TimelineMax
var box1 = $('.item10_1');
var box2 = $('.item10_2');
var box3 = $('.item10_3');
tween10 = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:0.5});
tween10.staggerTo([box1,box2,box3], 1, {rotation:180, borderRadius:'50%', backgroundColor:'#4169e1'},0.5);
}animate10();
function animate11(){
var box1 = $('.item11');
TweenMax.from(box1,1,{scale:2, opacity:0, rotation:360, ease:Back.easeOut});
}
function animate12(){
var obj1 = $('.item12_1');
var obj2 = $('.item12_2');
var obj3 = $('.item12_3');
var objects = [obj1,obj2,obj3];
TweenMax.staggerFrom(objects,5,{scale:2, opacity:0, rotation:360, ease:Elastic.easeOut}, .4);
}
//item13
window.onload = function(){
var box = document.getElementById("item13");
var x = 0;
var fn = setInterval(function(){
var value = x*0.1;
var left = 50 + Math.floor(Math.sin(value)*40);
var top = 50 + Math.floor(Math.cos(value)*20);
var width = 50 + Math.floor(Math.cos(value)*30);
var height = 50 + Math.floor(Math.cos(value)*30);
box.style.left = left + "px";
box.style.top = top + "px";
box.style.width = width + "px";
x++;
}, 30);
}
Written on April 9, 2017
comments powered by Disqus