728x90 300x250 SMALL gsap스크롤3 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는 강력한 웹 애니메이션 라이브러리로, ScrollTrigger는 gsap의 플러그인중 하나이다.ScrollTrigger를 사용하면 사용자의 스크롤 위치에 따라 애니메이션을 실행하거나 컨트롤할 수 있다.특히, 웹사이트에서 스크롤을 기반으로 동적인 인터랙션을 만들 때 유용하다. ScrollTrigger의 주요 기능스크롤 위치를 감지하여 애니메이션 실행 : 특정 요소가 화면에 나타날 때 애니메이션을 시작할 수 있다.스크롤 진행률에 따라 애니메이션 속도 조절(scrub 기능) : 사용자의 스크롤 속도에 따라 애니메이션을 부드럽게 조절할 수 있다.요소가 뷰포트에 들어올 때 트리거 : 특정 위치에서 애니메이션을 실행하도록 설정할 수 있다.고정(fixed) 애니메이션 지원(pin 기능) : 특정 요소를 스.. 2025. 3. 25. GSAP을 활용한 부드러운 스크롤 효과 다음은 스크롤하면 색상이 변하는 예제이다스크롤하면 색상이 변함 box 상단 margin-top:500px과 하단 margin-bottom:300px을 설정하여 스크롤 할때 상하 간격을 만듬사용자가 스크롤을 내려서 트리거인 .box요소의 상단이 화면 중앙에 위치하면 지점에 배경색 변경(#ff6600)스크롤이 .box요소 bottom이 화면 상단에 위치하면 애니메이션이 종료된다.scrub :true 스크롤의 위치에 따라 애니메이션이 부드럽게 진행되도록 설정한다. 스크롤하면 색상이 변함">스크롤하면 색상이 변함 2025. 3. 16. 이전 1 다음 728x90 반응형 LIST