GSAP ANIMATION v1.0 </doc>

GSAP

웹 브라우저에서 애니메이션을 구현하기 위한 자바스크립트 라이브러리!! 기존 CSS Animation이나 jQuery Animation보다 탁월한 퍼포먼스를 발휘할 수 있도록 최적화된 애니메이션 전용 라이브러리입니다.

Move(to) Star1

<script>
    let circle1 = $(".circle.circle1");
    let button1 = $(".btn.btn1");
    circle1.css({
        "position": "relative",
        marginBottom: "30px"
    });
    circle1.eq(4).css({
        background:"linear-gradient(90deg, rgba(88,255,183,1) 0%, rgba(64,78,204,1) 100%)"
    });

    button1.click(function () {
        // TweenMax.to(circle1, 1, {
        //     left: "90%"
        // });
        gsap.to(circle1.eq(0), 1, {left:"75%"});
        gsap.to(circle1.eq(1), 1, {left:"75%",borderRadius:"0"});
        gsap.to(circle1.eq(2), 1, {left:"75%",rotationY:"300deg"});
        gsap.to(circle1.eq(3), 1, {left:"75%",rotationX:"700deg"});
        gsap.to(circle1.eq(4), 1, {left:"75%",background: "linear-gradient(90deg, rgba(204,255,88,1) 0%, rgba(64,78,204,1) 100%)"});
        gsap.to(circle1.eq(5), 1, {left:"75%",scale:"2",rotationX: "100deg"});
        gsap.to(circle1.eq(6), 1, {left:"75%",scale:"2",rotationY: "100deg"});
        gsap.to(circle1.eq(7), 1, {left:"75%",scale:"0.5"});
        gsap.to(circle1.eq(8), 1, {left:"75%",skew:"30deg"});
    })

</script>

Move(from) Start2

<script>
    let circle2 = $(".circle.circle2");
    let button2 = $(".btn.btn2");
    circle2.css({
        "position": "relative",
        "margin-bottom": "30px"
    });
    button2.click(function(){
        gsap.to(circle2.eq(0), {left:"75%",rotationY:"300deg",duration:"1"});
        gsap.to(circle2.eq(1), {left:"75%",rotationY:"300deg",duration:"2"});
        gsap.to(circle2.eq(2), {left:"75%",rotationY:"300deg",duration:"3"});
        gsap.to(circle2.eq(3), {left:"75%",rotationY:"300deg",duration:"4"});
        gsap.to(circle2.eq(4), {left:"75%",rotationY:"300deg",duration:"5"});
        gsap.to(circle2.eq(5), {left:"75%",rotationY:"300deg",duration:"6"});
        gsap.to(circle2.eq(6), {left:"75%",rotationY:"300deg",duration:"7"});
        gsap.to(circle2.eq(7), {left:"75%",rotationY:"300deg",duration:"8"});
        gsap.to(circle2.eq(8), {left:"75%",rotationY:"300deg",duration:"9"});
    })
</script>

Move(easing) Start3

<script>
    let circle3 = $(".circle.circle3");
        let button3 = $(".btn.btn3");
        circle3.css({
            "position": "relative",
            "margin-bottom": "30px",
            width: "100px",
            height: "100px"
        });

        button3.click(function(){
            gsap.to(circle3.eq(0), {left:"85%",rotationY:"300deg",duration:"4", ease:"power1.out"});
            gsap.to(circle3.eq(1), {left:"85%",rotationY:"300deg",duration:"4", ease:"power2.out"});
            gsap.to(circle3.eq(2), {left:"85%",rotationY:"300deg",duration:"4", ease:"power3.out"});
            gsap.to(circle3.eq(3), {left:"85%",rotationY:"300deg",duration:"4", ease:"power4.out"});
            gsap.to(circle3.eq(4), {left:"85%",rotationY:"300deg",duration:"4", ease:"back.out(1.7)"});
            gsap.to(circle3.eq(5), {left:"85%",rotationY:"300deg",duration:"4", ease:"elastic.out(1. 0.3)"});
            gsap.to(circle3.eq(6), {left:"85%",rotationY:"300deg",duration:"4", ease:"bounce.out"});
            gsap.to(circle3.eq(7), {left:"85%",rotationY:"300deg",duration:"4", ease:"rough({ template: none.out, strength:  1, points: 20, taper: 'none', randomize: true, clamp: false})"});
            gsap.to(circle3.eq(8), {left:"85%",rotationY:"300deg",duration:"4", ease:"steps(10)"});
        })
</script>

Move(repeat) Start4

<script>
    let circle4 = $(".circle.circle4");
    let button4 = $(".btn.btn4");
    circle4.css({
        "position": "relative",
        "margin-bottom": "30px",
        width: "100px",
        height: "100px"
    });

    button4.click(function(){
        gsap.to(circle4.eq(0), {left:"85%",rotation:"700deg",duration:"3", ease:"power1.out", repeat:"1"});
        gsap.to(circle4.eq(1), {left:"85%",rotation:"700deg",duration:"3", ease:"power2.out", repeat:"2"});
        gsap.to(circle4.eq(2), {left:"85%",rotation:"700deg",duration:"3", ease:"power3.out", repeat:"3"});
        gsap.to(circle4.eq(3), {left:"85%",rotation:"700deg",duration:"3", ease:"power4.out", repeat:"4"});
        gsap.to(circle4.eq(4), {left:"85%",rotation:"700deg",duration:"3", ease:"back.out(1.7)", repeat:"-1"});
    })
</script>

Timeline Start5

<script>
    let circle5 = $(".circle.circle5");
    let button5 = $(".btn.btn5");
    circle5.css({
        "position": "relative",
        "margin-bottom": "30px",
        width: "200px",
        height: "200px"
    });

    button5.click(function(){
       let tLine = new TimelineMax();
       tLine
       .to(circle5,{left: "78%", duration: 1})
       .to(circle5,{top: "120%", duration: 1})
       .to(circle5,{left: "0%", duration: 1})
       .to(circle5,{top: "0", duration: 1});
    })
</script>

H.W 3바퀴

start6

<script>
    let circle6 = $(".circle.circle6");
    let button6 = $(".btn.btn6");
    circle6.css({
        "position": "relative",
        "margin-bottom": "30px",
        width: "200px",
        height: "200px"
    });

    button6.click(function(){
       let tLine = new TimelineMax({repeat:3, repeatDelay:1});
       tLine
       .to(circle6,{left: "78%", duration: 1})
       .to(circle6,{top: "120%", duration: 1})
       .to(circle6,{left: "0%", duration: 1})
       .to(circle6,{top: "0", duration: 1});
    })
</script>

Controlling play pause resume reverse seek timeScale timeScale kill restart

<script>
    let circle7 = $(".circle.circle7");
        let button7 = $(".btn.btn7");
        circle7.css({
            "position": "relative",
            "margin-bottom": "30px",
            width: "150px",
            height: "150px"
        });
        const tw = gsap.to(circle7,{duration:20, left:"78%",borderRadius:"0%",rotation:"720deg"});
        tw.pause();

        // button7.click(function(){
        //     gsap.to(circle7,{duration:10, left:"78%",borderRadius:"0%",rotation:"720deg"});
        // });
        button7.eq(0).click(function(){tw.play()});
        button7.eq(1).click(function(){tw.pause()});
        button7.eq(2).click(function(){tw.resume()});
        button7.eq(3).click(function(){tw.reverse()});
        button7.eq(4).click(function(){tw.seek(15)});
        button7.eq(5).click(function(){tw.timeScale(0.5)});
        button7.eq(6).click(function(){tw.timeScale(2)});
        button7.eq(7).click(function(){tw.kill()});
        button7.eq(8).click(function(){tw.restart()});
</script>

CallBack

• onComplete: 애니메이션이 완료되었을 때
• onStart: 애니메이션이 시작할 때
• onUpdate: 애니메이션이 업데이트 될 때마다
• onRepeat: 애니메이션이 반복될 때
• onReverseComplete: 애니메이션이 리버스 되고 완료되었을 때

Animation onComplete onStart onUpdate onRepeat onReverseComplete

<script>
    let circle8 = $(".circle.circle8");
    let button8 = $(".btn.btn8");
    circle8.css({
        "position": "relative",
        "margin-bottom": "30px",
        width: "150px",
        height: "150px"
    });
    button8.eq(0).click(function(){
        $(circle8).animate({left: "90%"},1000,function(){
            $(circle8).animate({left:"0%"},1000);
        });
    });
    button8.eq(1).click(function(){
        gsap.to(circle8,{duration:1,left:"90%",onComplete : com});
    });

    function com(){
        gsap.to(circle8,{duration:1,left:"0%"});
    }
</script>

Gsap Animaiton

See the Pen gsap Animation01 by HyunJi (@ahjee12) on CodePen.

See the Pen gsap Animation02 by HyunJi (@ahjee12) on CodePen.