GSAP의 .to(), .from(), .fromTo() 차이점과 사용법
GSAP는 강력한 애니메이션 라이브러리로, 웹에서 다양한 모션 효과를 쉽게 구현할 수 있다. GSAP의 핵심 메서드인 .to(), .from(), .fromTo()의 차이점을 이해하면 더 직관적으로 애니메이션을 만들 수 있다. 1. gsap.to()현재 상태에서 -> 지정한 값으로 애니메이션됨// .box 요소를 x축으로 200px 이동시키고, 1초 동안 애니메이션 실행gsap.to(".box", { x: 200, duration: 1 }); 현재 상태에서 X축 200px 이동하는 애니메이션이 실행된다.위치 이동, 크기 변경, 색상 변화 등 일반적인 애니메이션을 만들 때 사용2. gsap.from()지정한 값에서 -> 현재 상태로 애니메이션됨// .box 요소가 처음에는 투명하고, 크기가 0이었다가 원래..
2025. 4. 9.
단축키
내 블로그
| 내 블로그 - 관리자 홈 전환 |
Q
Q
|
| 새 글 쓰기 |
W
W
|
블로그 게시글
| 글 수정 (권한 있는 경우) |
E
E
|
| 댓글 영역으로 이동 |
C
C
|
모든 영역
| 이 페이지의 URL 복사 |
S
S
|
| 맨 위로 이동 |
T
T
|
| 티스토리 홈 이동 |
H
H
|
| 단축키 안내 |
Shift + /
⇧ + /
|
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.