gsap 사용법(핵심만 간단)

퍼블리싱을 하는 사람이라면 꼭 사용해야 할 gsap을 알려드리도록 하겠습니다. 간단하면서 화려한 애니메이션을 제공하는 gsap 사용법을 알려드리도록 하겠습니다.

gsap 사용법(핵심만 간단)

목차

• 사용환경설정
• gsap 애니메이션의 범위 설정하기
• gsap 애니메이션 반복 설정

 

 

 

사용환경 설정

우선 cdn을 가져와서 붙여준다.

 

gsap cdn 복사하러 가기

 

gsap 사용법

 

애니메이션 범위 설정하기

기본 정의 gsap. 범위(’ 타깃’, {옵션(오브젝트)})

 

gsap.to()

~까지 —> 타깃을 오브젝트로 설정한 위치까지 옮겨라.

ex) gsap.to('. hero', {x:100, y:100,}); === 해석: 클래스 hero을 x로 100y로 100만큼 이동해라.

 

gsap.from() ~부터 —> 움직인 타깃을 오브젝트를 사용하면서 원래 위치로 옮겨라.

ex) gsap.from('. hero', {x:100, y:100,}); === 해석: 클래스 hero을 x:100y:100에서 원래 위치인:x:0y:0으로 돌아와

 

gsap.fromTo() ~부터 ~까지

ex) gsap.from('. hero', {x:-100, y:-100,},
{x:300, y:300,}
); === 해석: 클래스 hero을 x:-100y:-100에서 :x:300y:300으로 이동해라

 

쉽게 말해서

to는 시작지점부터 실행하는 애니메이션

from은 돌아오는 애니메이션

fromTo는 to from을 합쳐 놓은 것

 

 

gsap 애니메이션 반복설정

• delay : 애니메이션이 시작되기 전에 지연시간을 지정합니다.
• repeat : 애니메이션이 몇 번 반복되어야 하는지를 지정합니다.
• yoyo : true로 설정하면 애니메이션이 앞뒤로 재생됩니다.
• repeatDelay : 각 반복 사이에 발생하는 지연시간을 지정합니다.

무한 반복을 원한다면 repeat:-1과 yoyo true를 주면 무한 반복으로 재생된다.

 

gsap.to(". orange", {x:300, repeat:-1, yoyo:true, });

 

 

 

 

gsap 사용법(핵심만 간단)

gsap 사용법(핵심만 간단)

 

리액트 강의처럼 독학 배우기

리액트 강의처럼 독학 배우기

 

리액트 useState문법 쓰는 이유

리액트 useState문법 쓰는이유