728x90 300x250 SMALL 2025/03/171 GSAP와 ScrollTrigger로 부드러운 스크롤 애니메이션 만들기 GSAP란?GSAP는 자바스크립트를 기반으로 한 애니메이션 라이브러리이다. 고성능, 간편한 API, 다양한 애니메이션 효과를 제공하며, 많은 웹사이트에서 사용되고 있다.ScrollTrigger란?ScrollTrigger는 GSAP의 플러그인으로, 스크롤 위치를 기반으로 애니메이션을 트리거할 수 있다.이를 통해 스크롤에 따라 애니메이션이 자연스럽게 동작하도록 설정할 수 있다. 1. 기본 html 구조Section 1Section 2Section 3Section 4 위의 html 코드는 4개의 섹션을 생성하는 구조이다. 각 섹션은 100vh(뷰포트 높이)를 차지하며, 페이지를 스크롤하면서 애니메이션을 적용할 대상이 된다.2. CSS 스타일링.section { height: 100vh; display: f.. 2025. 3. 17. 이전 1 다음 728x90 반응형 LIST