728x90 300x250 SMALL 전체 글1165 스와이프 + 도장 -비 보호되어 있는 글 입니다. 2025. 4. 1. 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. 이전 1 2 3 4 ··· 292 다음 728x90 반응형 LIST