CSS Reference v1.0 </doc>

GSAP

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

이동하기(to)

Animation Start

$(".btn1").click(function(){
    gsap.to(".box1 .circle1",1,{left:"90%"})
    gsap.to(".box1 .circle2",1,{left:"90%",borderRadius:"0%"})
    gsap.to(".box1 .circle3",1,{left:"90%",rotationY:"700deg"});
    gsap.to(".box1 .circle4",1,{left:"90%",rotationX:"700deg"});
    gsap.to(".box1 .circle5",1,{left:"90%",backgroundImage: "linear-gradient(to top, #30cfd0 0%, #330867 100%)"});
    gsap.to(".box1 .circle6",1,{left:"90%",scale:"3",rotationY:"350deg"});
    gsap.to(".box1 .circle7",1,{left:"90%",scale:"3",rotation:"1350deg"});
    gsap.to(".box1 .circle8",1,{left:"90%",scale:"0.5",});
    gsap.to(".box1 .circle9",1,{left:"90%",skew:"30deg",});
});

이동하기(from)

Animation Start

$(".btn2").click(function(){

    gsap.from(".box2 .circle1",1,{left:"90%"})
    gsap.from(".box2 .circle2",1,{left:"90%",borderRadius:"0%"})
    gsap.from(".box2 .circle3",1,{left:"90%",rotationY:"700deg"});
    gsap.from(".box2 .circle4",1,{left:"90%",rotationX:"700deg"});
    gsap.from(".box2 .circle5",1,{left:"90%",backgroundImage: "linear-gradient(to top, #30cfd0 0%, #330867 100%)"});
    gsap.from(".box2 .circle6",1,{left:"90%",scale:"3",rotationY:"350deg"});
    gsap.from(".box2 .circle7",1,{left:"90%",scale:"3",rotation:"1350deg"});
    gsap.from(".box2 .circle8",1,{left:"90%",scale:"0.5",});
    gsap.from(".box2 .circle9",1,{left:"90%",skew:"30deg",});
});

이동하기(easing)

Animation Start

$(".btn3").click(function(){
        
    gsap.to(".box3 .circle1",{duration:2,left:"90%",rotationY:"300deg",ease:"power1.out"})
    gsap.to(".box3 .circle2",{duration:2,left:"90%",rotationY:"310deg",ease:"power2.out"})
    gsap.to(".box3 .circle3",{duration:2,left:"90%",rotationY:"320deg",ease:"power3.out"});
    gsap.to(".box3 .circle4",{duration:2,left:"90%",rotationY:"330deg",ease:"power4.out"});
    gsap.to(".box3 .circle5",{duration:2,left:"90%",rotationY:"340deg",ease: "back.out(1.7)"});
    gsap.to(".box3 .circle6",{duration:2,left:"90%",rotationY:"350deg",ease: "elastic.out(1, 0.3)"});
    gsap.to(".box3 .circle7",{duration:2,left:"90%",rotationY:"360deg",ease: "bounce.out"});
    gsap.to(".box3 .circle8",{duration:2,left:"90%",rotationY:"370deg",ease: "slow(0.7, 0.7, false)"});
    gsap.to(".box3 .circle9",{duration:2,left:"90%",rotationY:"380deg", ease: "steps(12)"});
});

반복

Animation Start

$(".btn4").click(function(){
    gsap.to(".box4 .circle1",{duration:1,repeat:1,yoyo:true, left:"90%",rotation:"720deg",ease:"power4.out"})
    gsap.to(".box4 .circle2",{duration:1,repeat:2,yoyo:true,  left:"90%",rotation:"720deg",ease:"power4.out"})
    gsap.to(".box4 .circle3",{duration:1,repeat:3,yoyo:true,  left:"90%",rotation:"720deg",ease:"power4.out"})
    gsap.to(".box4 .circle4",{duration:1,repeat:4,yoyo:true,  left:"90%",rotation:"720deg",ease:"power4.out"})
    gsap.to(".box4 .circle5",{duration:1,repeat:-1,yoyo:true, left:"90%",rotation:"720deg",ease:"power4.out"})
});

timeline

Animation Start

Controlling

Animation Play Pause Resume Reverse Seek(0.5) timeScale(0.5) timeScale(2) Kill Restart()

callBacks

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

Animation jQuery GSAP

gasp animate

See the Pen Gasp animetion2 by sujin (@floatmoon) on CodePen.