728x90 300x250 SMALL Front-end/gsap10 [GSAP + ScrollTrigger] 스크롤 하면 애니메이션 실행 스크롤 다운 ↓ GSAP 애니메이션 실행! .box요소는 초기 상태에서 opacity:0, translateY(50px)로 설정되어 있음스크롤로 .box가 화면 아래 80% 지점에 도달하면 opacity:1, y:0으로 자연스럽게 애니메이션 한 번만 실행 (toggleActions: "play none none none") GSAP을 사용하면 좋은점다양한 이징 효과(ease: "power3.out", "bounce", "elastic" 등)직관적이고 확장성 높은 애니메이션 구성ScrollTrigger와 결합하면 스크롤 트리거 + 애니메이션을 손쉽게 제어 가능 스크롤 다운 ↓ GSAP 애니메이션 실행! ">스크롤 다운 ↓GSAP 애니메이션 실행! 2025. 5. 29. ScrollTrigger 이해하기: 핵심 개념 및 기능 분석 ScrollTrigger는 사용자가 페이지를 스크롤 할때 발생하는 이벤트를 바탕으로 애니메이션을 제어할 수 있다.이 플러그인을 사용하면 스크롤 위치에 따른 다양한 트리거를 설정할 수 있으며, 효과적인 애니메이션 연출이 가능하다. ScrollTrigger 주요 속성trigger : 애니메이션을 실행할 요소를 지정한다.start, end: 애니메이션의 시작과 끝을 스크롤 위치로 설정한다.scrub : 스크롤 속도에 따라 애니메이션을 동기화한다.pin : 요소를 화면에 고정하여 스크롤 동안 화면에 유지할 수 있다.toggleActionss : 애니메이션의 상태를 제어한다.gsap.to(".box", { x: 500, duration: 2, scrollTrigger: { trigger: ".box",.. 2025. 4. 5. 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. 이전 1 2 3 다음 728x90 반응형 LIST