Front-end/애니메이션
GSAP의 .to(), .from(), .fromTo() 차이점과 사용법
mooyou
2025. 4. 9. 23:17
728x90
300x250
SMALL
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이었다가 원래 상태로 복귀
gsap.from(".box", { opacity: 0, scale: 0, duration: 1 });
.box가 처음엔 투명하고 크기가 0인 상태에서 점점 원래 크기로 나타남
- 등장 애니메이션(자연스럽게 요소가 나타나는 효과)등에 사용
3. gsap.fromTo()
지정한 값에서 -> 지정한 값으로 애니메이션됨
// .box 요소가 opacity: 0, x: -100 상태에서 opacity: 1, x: 100으로 변경
gsap.fromTo(".box", { opacity: 0, x: -100 }, { opacity: 1, x: 100, duration: 1 });
.box가 처음엔 투명하고 왼쪽(-100px)에 있다가 -> 점점 나타나면서 오른쪽(100px)으로 이동
- 초기 상태와 목표 상태를 모두 명확하게 정의해야 할 때
4. .to(), .from(), .fromTo() 비교
메서드 | 시작 상태 | 목표 상태 | 예제 |
gsap.to() | 현재 상태 | 지정한 속성값 | {x:100}(현재 위치 -> 100px 이동) |
gsap.from() | 지정한 속성값 | 현재 상태 | {opacity:0}(투명 -> 현재 상태) |
gsap.fromTo() | 지정한 속성값 | 지정한 속성값 | {x: -100}, {x:100}(-100 -> 100이동) |
728x90
반응형
LIST