[GSAP3]시작하기 - 1 기본애니메이션 to 함수

사이트 : https://greensock.com/

GreenSock

가이드라인 : https://greensock.com/get-started/#what-is-gsap

Getting Started with GSAP

 

 

 

시작

 

GSAP3 를 사용하기 위해 추가할 파일

JS : https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js

 

 

 

 

 

gsap.to(target, {duration: 시간, 속성 : 값}) ==> target 에게 시간동안 속성의 값을 서서히 변화시키는 애니메이션 

 

gsap.to(".box", {duration: 2, x: 300}); == > $(".box").anmation({x:'300px'},2000) 와 같다. 2초동안 x 축으로 300만큼 이동.

속성에 opacity, scale, rotation 등의 값을 이용할 수 있다. 

 

 

여러개의 속성을 한번에 줄 수 있다. 

 

 

 

서로 다른 값을 줄 수 있다. 

 

 

 

타임라인을 이용해 순차적으로 애니메이션이 일어나도록 할 수 있다.

 

 

 

ease 속성으로 애니메이션을 좀 더 역동적으로 만들 수 있다 

 

 

 

타임라인으로 순차적으로 진행 중 동시에 진행하도록 설정하기