티스토리 뷰

GSAP

[GSAP] Timeline

Timelile

애니메이션을 순차적으로 적용합니다.


Timelile

애니메이션을 순차적으로 적용합니다.

문법(Syntax)

TweenMax.to("target", duration, vars);

이동하기

애니메이션을 순차적으로 적용합니다.

JQUERY
$(".start").on("click",function(){
    $(".box1")
        .animate({ left: "80%" }, 1000)
        .animate({ height: "300" }, 1000, 'easeOutQuad')
        .animate({ opacity: "0.5" }, 1000)
        .animate({ height: "60" }, 1000, 'easeInOutQuint')
        .animate({ opacity: "1", left: "0" }, 1000);
}); 
$(".reset").on("click",function(){
    $(".box1").animate({ left: "0"}, 0);
});
GSAP
$(".start").on("click",function(){
    var tl = new TimelineLite();
    tl.to(".box1", 1, {left: "80%"});
    tl.to(".box1", 1, {height: 300, ease:Elastic.easeOut});
    tl.to(".box1", 1, {opacity:0.5});
    tl.to(".box1", 1, {height: 60, ease:Elastic.easeOut});
    tl.to(".box1", 1, {opacity:1, left:"0"});
});

$(".choice .reset").on("click",function(){
    TweenMax.to(".box1", 0, { left: "0" });
}); 
JAVASCRIPT
const startBtn = document.querySelector('.start');
const resetBtn = document.querySelector('.reset');

startBtn.addEventListener('click', moveStart);
resetBtn.addEventListener('click', moveReset);

function moveStart(){
    var tl = new TimelineLite();
    tl.to(".box1", 1, {left: "80%"});
    tl.to(".box1", 1, {height: 300, ease:Elastic.easeOut});
    tl.to(".box1", 1, {opacity:0.5});
    tl.to(".box1", 1, {height: 60, ease:Elastic.easeOut});
    tl.to(".box1", 1, {opacity:1, left:"0"});
}
function moveReset(){
    TweenMax.to(".box1", 0, { left: "0" });
}
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>GSAP timeline1</title>
    <style>
        .box_wrap {width: 100%;}
        .box_wrap div {
            display: block; width: 60px; height: 60px; line-height: 65px; text-align: center; 
            border-radius: 50%; overflow: hidden; position: relative; font-size: 12px;
            color: #fff; margin: 4px;
            background-image: linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%);
        }
    </style>
</head>
<body>
    <div class="box_wrap">
        <div class="box1">box</div>
    </div>

    <div class="choice">
        <a href="#" class="reset">리셋</a>
        <a href="#" class="start">클릭하면 이동합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
    <script>
        $(".choice a").on("click",function(e){
            e.preventDefault();
        });

        //jquery
        // $(".start").on("click",function(){
        //     $(".box1")
        //         .animate({ left: "80%" }, 1000)
        //         .animate({ height: "300" }, 1000, 'easeOutQuad')
        //         .animate({ opacity: "0.5" }, 1000)
        //         .animate({ height: "60" }, 1000, 'easeInOutQuint')
        //         .animate({ opacity: "1", left: "0" }, 1000);
        // }); 
        // $(".reset").on("click",function(){
        //     $(".box1").animate({ left: "0"}, 0);
        // });

        //gsap
        // $(".start").on("click",function(){
        //     var tl = new TimelineLite();
        //     tl.to(".box1", 1, {left: "80%"});
        //     tl.to(".box1", 1, {height: 300, ease:Elastic.easeOut});
        //     tl.to(".box1", 1, {opacity:0.5});
        //     tl.to(".box1", 1, {height: 60, ease:Elastic.easeOut});
        //     tl.to(".box1", 1, {opacity:1, left:"0"});
        // });

        // $(".choice .reset").on("click",function(){
        //     TweenMax.to(".box1", 0, { left: "0" });
        // }); 

        //javascript
        const startBtn = document.querySelector('.start');
        const resetBtn = document.querySelector('.reset');

        startBtn.addEventListener('click', moveStart);
        resetBtn.addEventListener('click', moveReset);
        
        function moveStart(){
            var tl = new TimelineLite();
            tl.to(".box1", 1, {left: "80%"});
            tl.to(".box1", 1, {height: 300, ease:Elastic.easeOut});
            tl.to(".box1", 1, {opacity:0.5});
            tl.to(".box1", 1, {height: 60, ease:Elastic.easeOut});
            tl.to(".box1", 1, {opacity:1, left:"0"});
        }
        function moveReset(){
            TweenMax.to(".box1", 0, { left: "0" });
        }
    </script>
</body>
</html>

2. 이동하기

애니메이션을 순차적으로 적용합니다.

GSAP
$(".start1").on("click",function(){
    var tl = gsap.timeline();
    tl.to(".box1", {duration: 1, x: 300 })
      .to(".box2", {duration: 1, x: 300 })
      .to(".box3", {duration: 1, x: 300 })
      .to(".box4", {duration: 1, x: 300 })
});
$(".start2").on("click",function(){
    var tl = gsap.timeline();
    tl.to(".box1", {duration: 1, x: 300 })
      .to(".box2", {duration: 1, x: 300 })
      .to(".box3", {duration: 1, x: 300 }, "+=2")
      .to(".box4", {duration: 1, x: 300 }, "+=2")
});
$(".start3").on("click",function(){
    var tl = gsap.timeline();
    tl.to(".box1", {duration: 2, x: 300 })
      .to(".box2", {duration: 2, x: 300 })
      .to(".box3", {duration: 2, x: 300 }, "-=1")
      .to(".box4", {duration: 2, x: 300 }, "-=1")
});
$(".start4").on("click",function(){
    var tl = gsap.timeline();
    tl.to(".box1", {duration: 2, x: 300 })
      .to(".box2", {duration: 2, x: 300 })
      .to(".box3", {duration: 2, x: 300 }, 4)
      .to(".box4", {duration: 2, x: 300 }, 4)
});

$(".reset").on("click",function(){
    TweenMax.to([".box1, .box2, .box3, .box4"], {duration: 0, x: 0 });
});
JAVASCRIPT
const resetBtn = document.querySelector('.reset');
const startBtn1 = document.querySelector('.start1');
const startBtn2 = document.querySelector('.start2');
const startBtn3 = document.querySelector('.start3');
const startBtn4 = document.querySelector('.start4');

resetBtn.addEventListener('click', moveReset);
startBtn1.addEventListener('click', moveStart1);
startBtn2.addEventListener('click', moveStart2);
startBtn3.addEventListener('click', moveStart3);
startBtn4.addEventListener('click', moveStart4);

function moveStart1(){
    var tl = gsap.timeline();
    tl.to(".box1", {duration: 1, x: 300 })
        .to(".box2", {duration: 1, x: 300 })
        .to(".box3", {duration: 1, x: 300 })
        .to(".box4", {duration: 1, x: 300 });
}
function moveStart2(){
    var tl = gsap.timeline();
    tl.to(".box1", {duration: 1, x: 300 })
        .to(".box2", {duration: 1, x: 300 })
        .to(".box3", {duration: 1, x: 300 }, "+=2")
        .to(".box4", {duration: 1, x: 300 }, "+=2");
}
function moveStart3(){
    var tl = gsap.timeline();
    tl.to(".box1", {duration: 2, x: 300 })
        .to(".box2", {duration: 2, x: 300 })
        .to(".box3", {duration: 2, x: 300 }, "-=1")
        .to(".box4", {duration: 2, x: 300 }, "-=1");
}
function moveStart4(){
    var tl = gsap.timeline();
    tl.to(".box1", {duration: 2, x: 300 })
        .to(".box2", {duration: 2, x: 300 })
        .to(".box3", {duration: 2, x: 300 }, 4)
        .to(".box4", {duration: 2, x: 300 }, 4);
}

function moveReset(){
    TweenMax.to([".box1, .box2, .box3, .box4"], {duration: 0, x: 0 });
}
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>GSAP timeline1</title>
    <style>
        .box_wrap {width: 100%;}
        .box_wrap div {
            display: block; width: 60px; height: 60px; line-height: 65px; text-align: center; 
            border-radius: 50%; overflow: hidden; position: relative; font-size: 12px; color: #fff; margin: 4px;
            background-image: linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%);
        }
    </style>
</head>
<body>
    <div class="box_wrap">
        <div class="box1">box</div>
        <div class="box2">box</div>
        <div class="box3">box</div>
        <div class="box4">box</div>
    </div>

    <div class="choice">
        <a href="#" class="reset">리셋</a>
        <a href="#" class="start1">클릭하면 이동합니다.</a>
        <a href="#" class="start2">클릭하면(+2) 이동합니다.</a>
        <a href="#" class="start3">클릭하면(-1) 이동합니다.</a>
        <a href="#" class="start4">클릭하면(1) 이동합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"></script>
    <script>
        $(".choice a").on("click",function(e){
            e.preventDefault();
        });

        //gsap
        // $(".start1").on("click",function(){
        //     var tl = gsap.timeline();
        //     tl.to(".box1", {duration: 1, x: 300 })
        //       .to(".box2", {duration: 1, x: 300 })
        //       .to(".box3", {duration: 1, x: 300 })
        //       .to(".box4", {duration: 1, x: 300 })
        // });
        // $(".start2").on("click",function(){
        //     var tl = gsap.timeline();
        //     tl.to(".box1", {duration: 1, x: 300 })
        //       .to(".box2", {duration: 1, x: 300 })
        //       .to(".box3", {duration: 1, x: 300 }, "+=2")
        //       .to(".box4", {duration: 1, x: 300 }, "+=2")
        // });
        // $(".start3").on("click",function(){
        //     var tl = gsap.timeline();
        //     tl.to(".box1", {duration: 2, x: 300 })
        //       .to(".box2", {duration: 2, x: 300 })
        //       .to(".box3", {duration: 2, x: 300 }, "-=1")
        //       .to(".box4", {duration: 2, x: 300 }, "-=1")
        // });
        // $(".start4").on("click",function(){
        //     var tl = gsap.timeline();
        //     tl.to(".box1", {duration: 2, x: 300 })
        //       .to(".box2", {duration: 2, x: 300 })
        //       .to(".box3", {duration: 2, x: 300 }, 4)
        //       .to(".box4", {duration: 2, x: 300 }, 4)
        // });

        // $(".reset").on("click",function(){
        //     TweenMax.to([".box1, .box2, .box3, .box4"], {duration: 0, x: 0 });
        // }); 

        //javascript
        const resetBtn = document.querySelector('.reset');
        const startBtn1 = document.querySelector('.start1');
        const startBtn2 = document.querySelector('.start2');
        const startBtn3 = document.querySelector('.start3');
        const startBtn4 = document.querySelector('.start4');

        resetBtn.addEventListener('click', moveReset);
        startBtn1.addEventListener('click', moveStart1);
        startBtn2.addEventListener('click', moveStart2);
        startBtn3.addEventListener('click', moveStart3);
        startBtn4.addEventListener('click', moveStart4);
        
        function moveStart1(){
            var tl = gsap.timeline();
            tl.to(".box1", {duration: 1, x: 300 })
                .to(".box2", {duration: 1, x: 300 })
                .to(".box3", {duration: 1, x: 300 })
                .to(".box4", {duration: 1, x: 300 });
        }
        function moveStart2(){
            var tl = gsap.timeline();
            tl.to(".box1", {duration: 1, x: 300 })
                .to(".box2", {duration: 1, x: 300 })
                .to(".box3", {duration: 1, x: 300 }, "+=2")
                .to(".box4", {duration: 1, x: 300 }, "+=2");
        }
        function moveStart3(){
            var tl = gsap.timeline();
            tl.to(".box1", {duration: 2, x: 300 })
                .to(".box2", {duration: 2, x: 300 })
                .to(".box3", {duration: 2, x: 300 }, "-=1")
                .to(".box4", {duration: 2, x: 300 }, "-=1");
        }
        function moveStart4(){
            var tl = gsap.timeline();
            tl.to(".box1", {duration: 2, x: 300 })
                .to(".box2", {duration: 2, x: 300 })
                .to(".box3", {duration: 2, x: 300 }, 4)
                .to(".box4", {duration: 2, x: 300 }, 4);
        }

        function moveReset(){
            TweenMax.to([".box1, .box2, .box3, .box4"], {duration: 0, x: 0 });
        }
    </script>
</body>
</html>

3. 이동하기(.add)

애니메이션을 순차적으로 적용합니다.

GSAP
$(".start1").on("click",function(){
    var tl = gsap.timeline();
    tl.to(".box1", {duration: 1, x: 300 })
      .add("plus", "+=1")
      .to(".box2", {duration: 1, x: 300 }, "plus")
      .to(".box3", {duration: 1, x: 300 }, "plus")
      .to(".box4", {duration: 1, x: 300 }, "plus");
});

$(".start2").on("click",function(){
    var tl = gsap.timeline();
    tl.to(".box1", {duration: 1, x: 300 })
      .add("plus", "+=1")
      .to(".box2", {duration: 1, x: 300 }, "plus")
      .to(".box3", {duration: 1, x: 300 }, "plus")
      .to(".box4", {duration: 1, x: 300 }, "plus+=0.5")
});

$(".reset").on("click",function(){
    TweenMax.to([".box1, .box2, .box3, .box4"], {duration: 0, x: 0 });
}); 
JAVASCRIPT
const resetBtn = document.querySelector('.reset');
const startBtn1 = document.querySelector('.start1');
const startBtn2 = document.querySelector('.start2');

resetBtn.addEventListener('click', moveReset);
startBtn1.addEventListener('click', moveStart1);
startBtn2.addEventListener('click', moveStart2);

function moveStart1(){
    var tl = gsap.timeline();
    tl.to(".box1", {duration: 1, x: 300 })
        .add("plus", "+=1")
        .to(".box2", {duration: 1, x: 300 }, "plus")
        .to(".box3", {duration: 1, x: 300 }, "plus")
        .to(".box4", {duration: 1, x: 300 }, "plus");
}
function moveStart2(){
    var tl = gsap.timeline();
    tl.to(".box1", {duration: 1, x: 300 })
        .add("plus", "+=1")
        .to(".box2", {duration: 1, x: 300 }, "plus")
        .to(".box3", {duration: 1, x: 300 }, "plus")
        .to(".box4", {duration: 1, x: 300 }, "plus+=0.5");
}
function moveReset(){
    TweenMax.to([".box1, .box2, .box3, .box4"], {duration: 0, x: 0 });
}
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>GSAP timeline1</title>
    <style>
        .box_wrap {width: 100%;}
        .box_wrap div {
            display: block; width: 60px; height: 60px; line-height: 65px; text-align: center; 
            border-radius: 50%; overflow: hidden; position: relative; font-size: 12px; color: #fff; margin: 4px;
            background-image: linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%);
        }
    </style>
</head>
<body>
    <div class="box_wrap">
        <div class="box1">box</div>
        <div class="box2">box</div>
        <div class="box3">box</div>
        <div class="box4">box</div>
    </div>

    <div class="choice">
        <a href="#" class="reset">리셋</a>
        <a href="#" class="start1">클릭하면 이동합니다.</a>
        <a href="#" class="start2">클릭하면 이동합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"></script>
    <script>
        $(".choice a").on("click",function(e){
            e.preventDefault();
        });

        //gsap
        // $(".start1").on("click",function(){
        //     var tl = gsap.timeline();
        //     tl.to(".box1", {duration: 1, x: 300 })
        //       .add("plus", "+=1")
        //       .to(".box2", {duration: 1, x: 300 }, "plus")
        //       .to(".box3", {duration: 1, x: 300 }, "plus")
        //       .to(".box4", {duration: 1, x: 300 }, "plus");
        // });

        // $(".start2").on("click",function(){
        //     var tl = gsap.timeline();
        //     tl.to(".box1", {duration: 1, x: 300 })
        //       .add("plus", "+=1")
        //       .to(".box2", {duration: 1, x: 300 }, "plus")
        //       .to(".box3", {duration: 1, x: 300 }, "plus")
        //       .to(".box4", {duration: 1, x: 300 }, "plus+=0.5")
        // });
        
        // $(".reset").on("click",function(){
        //     TweenMax.to([".box1, .box2, .box3, .box4"], {duration: 0, x: 0 });
        // }); 

        //javascript
        const resetBtn = document.querySelector('.reset');
        const startBtn1 = document.querySelector('.start1');
        const startBtn2 = document.querySelector('.start2');
        
        resetBtn.addEventListener('click', moveReset);
        startBtn1.addEventListener('click', moveStart1);
        startBtn2.addEventListener('click', moveStart2);
        
        function moveStart1(){
            var tl = gsap.timeline();
            tl.to(".box1", {duration: 1, x: 300 })
                .add("plus", "+=1")
                .to(".box2", {duration: 1, x: 300 }, "plus")
                .to(".box3", {duration: 1, x: 300 }, "plus")
                .to(".box4", {duration: 1, x: 300 }, "plus");
        }
        function moveStart2(){
            var tl = gsap.timeline();
            tl.to(".box1", {duration: 1, x: 300 })
                .add("plus", "+=1")
                .to(".box2", {duration: 1, x: 300 }, "plus")
                .to(".box3", {duration: 1, x: 300 }, "plus")
                .to(".box4", {duration: 1, x: 300 }, "plus+=0.5");
        }
        function moveReset(){
            TweenMax.to([".box1, .box2, .box3, .box4"], {duration: 0, x: 0 });
        }
    </script>
</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼