GSAP ScrollSmoother로 이미지 왜곡 효과 완벽 구현하기
CSS 24.10.15GSAP ScrollSmoother는 GreenSock Animation Platform (GSAP)의 플러그인 중 하나로, 웹 페이지에서 스크롤을 부드럽고 매끄럽게 처리할 수 있게 해줍니다.
이 플러그인은 스크롤링 경험을 향상시키고 사용자 인터페이스를 개선하기 위해 설계되었습니다.
기본 개념
ScrollTrigger는 스크롤 위치를 기반으로 애니메이션을 제어하는 플러그인으로, 트리거 요소를 설정하고 시작/종료 위치를 정의하여 사용자가 스크롤할 때 자연스럽고 매끄러운 애니메이션 효과를 구현할 수 있습니다. 이를 통해 웹 페이지에 더 동적이고 매력적인 사용자 경험을 제공할 수 있습니다.
구현 원리
1. 스크롤 위치 감지 : ScrollTrigger는 페이지의 스크롤 위치를 감지합니다. 이를 통해 특정 요소가 화면에 진입하거나 특정 위치에 도달했을 때 애니메이션을 시작할 수 있습니다.
2. 트리거 설정 : 개발자는 트리거 요소를 지정합니다. 이 요소는 애니메이션을 시작하는 기준점이 됩니다. 예를 들어, 특정 섹션이나 이미지가 스크롤 위치와 관계없이 애니메이션을 실행하도록 설정할 수 있습니다.
3. 애니메이션 상태 정의 : 애니메이션의 시작 상태와 끝 상태를 정의합니다. 이 과정에서 GSAP의 다양한 애니메이션 속성을 사용할 수 있으며, 스케일, 위치, 불투명도 등을 조정할 수 있습니다.
4. 스크롤 이벤트와의 연결 : ScrollTrigger는 스크롤 이벤트에 리스너를 연결하여, 사용자가 스크롤할 때마다 애니메이션 상태를 업데이트합니다. 이때 scrub 옵션을 사용하면 스크롤 속도에 따라 애니메이션이 매끄럽게 조정됩니다.
5. 시작 및 종료 위치 : start 및 end 옵션을 설정하여 애니메이션의 시작과 종료 위치를 정의합니다. 예를 들어, "top 80%"는 스크롤이 화면의 80% 지점에서 애니메이션을 시작하도록 설정합니다.
6. 상태 고정 : 스크롤이 끝나는 지점에서 애니메이션이 완료되면, 최종 상태가 고정됩니다. 이를 통해 사용자는 스크롤을 끝내도 애니메이션의 최종 결과를 유지할 수 있습니다.
7. 브라우저 성능 최적화 : ScrollTrigger는 요청 애니메이션 프레임(requestAnimationFrame) 메커니즘을 사용하여, 브라우저의 성능을 최적화합니다. 이를 통해 애니메이션이 부드럽게 실행되고, 불필요한 렌더링을 방지합니다.
[코드예시]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const skewSetter = gsap.quickTo("img", "skewY"); // 빠른 성능을 위한 quickTo const clamp = gsap.utils.clamp(-20, 20); // skew 범위 제한 ScrollSmoother.create({ wrapper: "#wrapper", content: "#content", smooth: 1.5, // 부드러운 스크롤링 speed: 2.5, // 스크롤 속도 effects: true, onUpdate: (self) => { // 스크롤 속도에 따라 skew 값 설정 const velocity = self.getVelocity(); skewSetter(clamp(velocity / -50)); }, onStop: () => skewSetter(0) // 스크롤 멈추면 skew 초기화 }); | cs |
사용 효과
부드러운 스크롤링
ScrollSmoother는 페이지의 스크롤을 부드럽고 자연스럽게 만들어 주며, 스크롤 시 요소의 위치와 애니메이션을 조정할 수 있습니다. 이는 사용자가 콘텐츠를 더 쉽게 탐색할 수 있게 합니다.
스크롤 애니메이션
이 플러그인은 스크롤 위치에 따라 애니메이션을 제어할 수 있어, 다양한 시각적 효과를 생성할 수 있습니다. 예를 들어, 스크롤 속도에 따라 요소의 투명도, 크기, 위치 등을 변화시킬 수 있습니다.
유연한 설정
ScrollSmoother는 다양한 설정 옵션을 제공하여 개발자가 자신만의 스크롤 효과를 쉽게 조정할 수 있습니다. 부드러움의 정도, 속도, 효과의 적용 범위 등을 커스터마이즈할 수 있습니다.
See the Pen Untitled by designkits (@designkits) on CodePen.