Docs

ScrollTrigger 플러그인은 페이지 스크롤 이벤트를 사용하여 웹 요소의 애니메이션과 상호 작용하는 강력한 도구입니다. 이 플러그인을 사용하면 스크롤 위치, 화면 진입 및 화면 퇴장과 같은 스크롤 관련 이벤트를 기반으로 웹 요소를 제어하고 애니메이션을 트리거할 수 있습니다.

https://vimeo.com/422191943

게임을 앞서가기 위해서는 ScrollTrigger의 가장 흔한 실수에 대해서도 배워보세요.

주요기능

• 특정 요소에 애니메이션을 연결하여 해당 요소가 뷰포트에 들어올 때만 재생되도록 할 수 있습니다. 이로써 성능이 향상되며 아름다운 애니메이션을 실제로 볼 수 있게 됩니다!
• ScrollTrigger는 정의된 영역에 들어오거나 나갈 때 애니메이션을 제어할 수 있는 작업(재생, 일시정지, 재개, 다시 시작, 반전, 완료, 재설정)을 수행하거나 스크롤바와 직접 연결하여 스크러버(Scrubber)처럼 작동하도록 할 수 있습니다 (scrub: true).
• 애니메이션과 스크롤바 간의 연결을 완화하여 일정 시간 동안 "따라잡는" 시간을 설정할 수 있습니다. 예를 들어 scrub: 1은 1초 동안 따라잡습니다.
• ScrollSmoother와 통합되어 있으며, GreenSock의 네이티브 스크롤 기술 위에 구축된 부드러운 스크롤링 도구입니다 (멤버 전용 혜택).
• 속도를 기반으로 애니메이션의 특정 지점으로 스냅합니다. 실제로 언제든지 스크롤의 getVelocity()를 얻을 수 있습니다. 타임라인 내의 가장 가까운 레이블 또는 배열 내의 진행값에 스냅하거나 자신만의 함수 기반 로직을 실행할 수 있습니다. 스크롤 트리거를 직접 GSAP 애니메이션 (타임라인 포함)에 포함하거나 독립적인 인스턴스를 생성하고 리치한 콜백 시스템을 활용하여 원하는 작업을 수행할 수 있습니다.
• 고급 핀(Pin) 기능을 사용하여 특정 스크롤 위치 사이에 요소를 고정시킬 수 있습니다. 패딩은 자동으로 추가되어 다른 요소가 요소가 고정 해제될 때 다른 요소가 따라잡을 수 있도록 합니다 (pinSpacing: false로 비활성화할 수 있음). 동일한 요소를 다른 지점에서 여러 번 고정할 수도 있습니다.
• 스크롤 위치를 정의하는 데 높은 유연성을 제공합니다. 예를 들어 "이 요소의 중앙이 뷰포트의 중앙에 닿을 때 시작하고, 다른 요소의 하단이 뷰포트의 하단에 닿을 때 끝나는"와 같이 정의할 수 있으며, 키워드 (top, center, bottom, left, right), 백분율, 픽셀 또는 "+=300px"와 같은 상대적인 값 등을 사용할 수 있습니다. 구문에 익숙해지면 획기적으로 직관적입니다.
• 수직 또는 수평 스크롤을 수용합니다.
• onEnter, onLeave, onEnterBack, onLeaveBack, onToggle, onUpdate, onScrubComplete, onRefresh를 포함한 풍부한 콜백 시스템 제공합니다.
• 창 크기 조절 시 위치를 자동으로 다시 계산합니다.
• 개발 중에 시작/끝/트리거 지점을 정확히 보려면 시각적 표시 요소를 활성화할 수 있습니다. startColor: "green", endColor: "red", fontSize: "12px"와 같은 사용자 정의 옵션을 사용하여 마커를 사용자 정의할 수 있습니다.
• CSS 클래스를 토글합니다. 예를 들어, toggleClass: "active"는 ScrollTrigger가 활성 상태일 때 트리거 요소에 "active" 클래스를 추가합니다. 다른 요소에도 영향을 줄 수 있습니다.