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.
GSAP ScrollTrigger Snap 기능 가이드
gsap의 snap 옵션은 스크롤 애니메이션에서 특정 지점에 자동으로 정렬되도록 해주는 기능이다. 주로 ScrollTrigger와 함께 사용하며 , 특정 지점(예 섹션 단위)에서 스냅이 걸려 자연스럽게 정렬된다.snap 기본 사용법scrollTrigger: { snap: [0, 0.5, 1] // 스크롤 진행 정도(0%, 50%, 100%)에서 스냅} 이 경우 스크롤 시 0%, 50%, 100%의 위치에서 자동으로 멈추게 된다.snap 사용 방식 3가지1. 배열 방식snap: [0, 0.33, 0.66, 1] // 4개 섹션이 있다면 각각 0%, 33%, 66%, 100%에서 스냅 특정 지점으로 스냅을 걸고 싶을 때 사용 2. 비율 값 방식snap: 1 / 3 // 3개의 섹션이므로 33.3% 간격..
2025. 3. 27.