728x90 300x250 SMALL Front-end/gsap11 스크롤 특정 위치에 도달 하면 JS 함수 실행하기 [GSAP] 이번에는 스크롤로 특정 영역 도달 시 단순히 애니메이션 효과를주는게 아님 함수를 실행하는 방법을 알아보겠습니다. 스크롤 내려주세요 ↓ 트리거 영역 gsap.registerPlugin(ScrollTrigger) : GSAP은 기본적으로 core 기능만 포함되어 있고 ScrollTrigger 같은 확장 플러그인은 별도로 등록해야 사용 가능하다, 이 명령으논 ScrollTrigger를 GSAP 안에서 사용할 수 있게 등록해주는 명령어이다.trigger : 이 트리거 요소가 기준이 된다. 즉 여기서는 .trigger-zone 요소가 스크롤 지점 감지의 기준점이 된다,start : top 80%는 트리거 요소의 top이 브라우저 화면의 80%지점에 닿을 때 실행하라는 뜻이다.onEnter.. 2025. 6. 15. [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. 이전 1 2 3 다음 728x90 반응형 LIST