본문 바로가기
728x90
300x250
SMALL

Front-end/gsap8

ScrollTrigger로 요소를 부드럽게 움직이는 방법 ScrollTrigger의 기본적인 사용방법을 예제로 익혀보자. 가장 간단한 방법은 특정 요소가 화면에 보일 때 애니메이션을 실행하는 것이다. gsap.to(".box", { x: 500, // 오른쪽으로 500px 이동 duration: 2, scrollTrigger: { trigger: ".box", // 트리거 요소 지정 start: "top 80%", // 시작 위치 end: "top 20%", // 종료 위치 scrub: true, // 스크롤과 애니메이션을 동기화 }}); 2025. 3. 31.
Gsap ScrollTrigger 처음 설치 및 기본 설정 방법 개념 설명ScrollTrigger를 사용하려면 먼저 GSAP과 ScrollTrigger 플러그인을 로드해야 한다.  설치 방법1) CDN 방식 2) npm 설치Node.js 환경에서 사용하려면 npm으로 설치할 수 있다.npm install gsap 이후 JavsScript 파일에서 플러그인을 등록해야 한다.import gsap from "gsap";import ScrollTrigger from "gsap/ScrollTrigger";gsap.registerPlugin(ScrollTrigger); 기본예제 만들어보기 Scroll to Animate  // 대상(.animate-box)선택하고 중괄호에 움직임을 준다.x축으로 500px 움직임실행결과   Scroll to A.. 2025. 3. 30.
gsap pin효과 - 비 보호되어 있는 글 입니다. 2025. 3. 29.
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.
728x90
반응형
LIST