트윈맥스 TweenMax

카테고리를 어디로 넣어야할지 몰라서 일단 여기에.

// 이하 포함
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/easing/EasePack.min.js"></script>
 
// Simple Tween
TweenLite.to(allItems, 1.5, {y: 20, autoAlpha: 0});
 
// Simple Tween
TweenLite.from(img, 1, {x: -100});
TweenLite.from(h2, .5, {autoAlpha: 0, delay: 1}); // delay로 이후 동작 설정가능.
 
// Simple Tween
TweenLite.from(img, 1, {
    x: -200, 
    ease: RoughEase.ease.config({ 
        template: Power0.easeNone, 
        strength: 1, 
        points: 20, 
        taper: "none", 
        randomize: true, 
        clamp: true
    })
});
TweenLite.from(img, 1, {
    x: -100, 
    ease: SlowMo.ease.config(0.7, 0.7, false)
});
TweenLite.from(img, 1, {
    x: -300, 
    ease: SteppedEase.config(20)
}); // ease를 이용해서 다양한 움직임 연출가능.
 
 
// Simple Callback Functions
TweenLite.from(img, 1, {
    x: -200, 
    ease:Power1.easeInOut, 
    onStart: onStart,
    onUpdate: onUpdate,
    onComplete: onComplete
});
 
function onStart(){
    console.log('animation started');
}
function onUpdate(){
    h2.text(i++);
}
function onComplete(){
    console.log('animation completed');
} 
 
var img = $('img'),
    h2 = $('h2'),
    h1 = $('h1'),
    intro = $('.intro'),
    listItem = $('ul li'),
    tl = new TimelineLite();
 
    // Animating Multiple Objects - 하나씩 컨트롤 할수도 있고
    TweenLite.from(h1, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut, delay: 0.2});
    TweenLite.from(intro, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut, delay: 0.4});
    TweenLite.from(img, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut, delay: 0.6});
    TweenLite.from(h2, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut, delay: 0.8});
    TweenLite.from(listItem, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut, delay: 1});
 
    tl // 타임라인 인스턴스생성해서 관리할수도 있음.
    .from(h1, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut})
    .from(intro, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut}, '-=0.15')
    .from(img, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut}, '-=0.15')
    .from(h2, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut}, '-=0.15')
    .from(listItem, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut}, '-=0.15');
    
 
 
// Controlling Timeline Playback
tl
    .from(h1, 1, {y: -15, autoAlpha: 0, ease:Power1.easeOut})
    .from(intro, 1, {y: -15, autoAlpha: 0, ease:Power1.easeOut})
    .from(img, 1, {y: -15, autoAlpha: 0, ease:Power1.easeOut})
    .from(h2, 1, {y: -15, autoAlpha: 0, ease:Power1.easeOut})
    .from(listItem, 1, {y: -15, autoAlpha: 0, ease:Power1.easeOut});
    .staggerFrom(buttons, 1, {cycle: {
        x: [50, -50],
        scale: [2, 0.5]
    }, autoAlpha: 0, ease:Power1.easeOut}, 0.5);  // staggering animations 
 
 
$('#btnPlay').on('click',function(){
    tl.play();
});
 
$('#btnPause').on('click',function(){
    tl.pause();
});
 
$('#btnResume').on('click',function(){
    tl.resume();
});
 
$('#btnReverse').on('click',function(){
    tl.reverse();
});
 
$('#btnSpeedUp').on('click',function(){
    tl.timeScale(8);
});
 
$('#btnSlowDown').on('click',function(){
    tl.timeScale(0.5);
});
 
$('#btnSeek').on('click',function(){
    tl.seek(1);
});
 
$('#btnProgress').on('click',function(){
    tl.progress(0.5);
});
 
$('#btnRestart').on('click',function(){
    tl.restart();
});  // 타임라인에 접근해서 이벤트 걸 수 있음