728x90
반응형
사이트 : https://greensock.com/
가이드라인 : https://greensock.com/get-started/#what-is-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 속성으로 애니메이션을 좀 더 역동적으로 만들 수 있다
타임라인으로 순차적으로 진행 중 동시에 진행하도록 설정하기
728x90
반응형
'CSS > GSAP3 - 애니메이션플러그인' 카테고리의 다른 글
[GSAP3]시작하기 - 2 기본애니메이션 from 함수 (384) | 2020.03.20 |
---|
댓글