댓글 검색 목록

[javascript] ScrollTrigger

페이지 정보

작성자 운영자 작성일 20-06-12 11:32 조회 995 댓글 0

ScrollTrigger는 최소한의 코드로 획기적인 스크롤 기반 애니메이션을 만듭니다.

https://vimeo.com/422191943

주요 특징

해당 요소가 뷰포트에 있을 때만 재생되도록 애니메이션을 특정 요소에 연결합니다. 이렇게 하면 성능이 향상되고 아름다운 애니메이션을 실제로 볼 수 있습니다!
ScrollTriggers는 정의 된 영역에 들어가거나 나갈 때 애니메이션에 대한 작업 (재생, 일시 중지, 다시 시작, 다시 시작, 반전, 완료, 재설정)을 수행하거나 스크러버처럼 작동하도록 스크롤 막대에 직접 연결할 수 있습니다 (스크럽 : true).
애니메이션과 스크롤바 사이의 링크를 부드럽게 하여 스크럽과 같이 "잡기"까지 일정 시간이 걸립니다. 1이 걸리는 데 1 초가 걸립니다.
속도를 기준으로 애니메이션의 특정 지점에 스냅합니다. 사실, 언제든지 스크롤의 getVelocity()를 얻을 수 있습니다. 타임 라인 또는 진행률 값에서 가장 가까운 레이블에 배열로 스냅하거나 스냅을 위한 사용자 정의 함수 기반 논리를 실행
스크롤 트리거를 모든 GSAP 애니메이션 (타임 라인 포함)에 직접 포함 시키거나 독립형 인스턴스를 생성하고 풍부한 콜백 시스템을 활용하여 원하는 작업을 수행하십시오.
고급 고정 기능은 특정 스크롤 위치 사이에서 요소를 제자리에 잠글 수 있습니다. 패딩은 자동으로 추가되어 다른 요소를 아래로 푸시하므로 요소가 고정 해제 될 때 따라 잡습니다 (pinSpacing : false로 비활성화).
"이 요소의 중심이 뷰포트의 중심에 닿으면 시작하고 다른 요소의 아래쪽이 뷰포트의 바닥에 닿으면 종료"와 같이 스크롤 위치를 정의 할 수 있는 유연성이 뛰어납니다. 키워드 (위쪽, 가운데, 아래쪽, 왼쪽) , 오른쪽), 백분율, 픽셀 또는 "+ = 300px"와 같은 상대 값입니다. 구문이 중단되면 매우 직관적입니다.
수직 또는 수평 스크롤을 수용합니다.
onEnter, onLeave, onEnterBack, onLeaveBack, onToggle, onUpdate, onScrubComplete 및 onRefresh를 포함한 풍부한 콜백 시스템.
창의 크기를 조정할 때 위치를 자동으로 다시 계산합니다.
개발 중 시각적 마커를 활성화하여 시작 / 종료 / 트리거 지점의 정확한 위치를 봅니다. 마커와 같은 사용자 정의 옵션이 풍부합니다 : {startColor : "green", endColor : "red", fontSize : Custom "12px"}
CSS 클래스를 토글합니다. 예를 들어 toggleClass : "active"는 ScrollTrigger가 활성화되어있는 동안 "active"클래스를 트리거 요소에 추가합니다. 다른 요소에도 영향을 줄 수 있습니다.
사용자 정의 컨테이너-뷰포트를 사용할 필요가 없습니다. 대신 <div>와 같은 사용자 정의 스크롤러를 정의하십시오.
최대 성능을 위해 고도로 최적화되어 있습니다-스크롤 이벤트를 디 바운싱하고, 업데이트를 GSAP 및 화면 새로 고침과 동기화하고, 크기 조정 재 계산이 제한됩니다.
스크롤 재킹이 없으므로 CSS 스크롤 스냅과 같은 기본 기술과 결합 할 수 있습니다.
대략 6.5kb gzipped.

간단한 예

gsap.to(".box", {
  scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once)
  x: 500
});

고급 예

let tl = gsap.timeline({
    // yes, we can add it to an entire timeline!
    scrollTrigger: {
      trigger: ".container",
      pin: true,   // pin the trigger element while active
      start: "top top", // when the top of the trigger hits the top of the viewport
      end: "+=500", // end after scrolling 500px beyond the start
      scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
      snap: {
        snapTo: "labels", // snap to the closest label in the timeline
        duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
        delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping
        ease: "power1.inOut" // the ease of the snap animation ("power3" by default)
      }
    }
  });

// add animations and labels to the timeline
tl.addLabel("start")
  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})
  .addLabel("color")
  .from(".box", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".box", {rotation: 360})
  .addLabel("end");

독립형 / 사용자 정의 예

ScrollTriggers를 애니메이션에 직접 넣을 필요는 없습니다 (아마도 가장 일반적인 사용 사례 임). 무엇이든 콜백을 사용하십시오 ...

ScrollTrigger.create({
  trigger: "#id",
  start: "top top",
  endTrigger: "#otherID",
  end: "bottom 50%+=100px",
  onToggle: self => console.log("toggled, isActive:", self.isActive),
  onUpdate: self => {
    console.log("progress:", self.progress.toFixed(3), "direction:", self.direction, "velocity", self.getVelocity());
  }
});

사용법 및 특수 속성

scrollTrigger는 트리거의 속기 (아래 설명 참조) 또는 다음 속성 중 하나를 가진 구성 객체로 사용할 수 있습니다.

속성	설명
animation	트윈 \| 타임 라인-ScrollTrigger에서 제어해야하는 GSAP 트윈 또는 타임 라인 인스턴스입니다. ScrollTrigger 당 하나의 애니메이션 만 제어 할 수 있지만 모든 애니메이션을 단일 타임 라인 (최상)으로 감싸거나 원하는 경우 여러 개의 ScrollTrigger를 만들 수 있습니다.
anticipatePin	숫자-큰 섹션 / 패널을 고정하면 빠르게 스크롤 할 때 고정이 약간 지연되는 것을 알 수 있습니다. 대부분의 최신 브라우저는 별도의 스레드에서 스크롤 다시 그리기를 처리하기 때문에 고정하는 순간 브라우저가 미리 고정 된 내용을 이미 페인트하여 1/60 초 동안 볼 수있게 만들었 기 때문입니다. 이를 방지하는 유일한 방법은 ScrollTrigger가 스크롤 속도를 모니터링하고 핀을 예상하여 고정되지 않은 내용의 플래시를 피하기 위해 약간 일찍 적용하는 것입니다. expectPin : 1의 값은 일반적으로 좋지만이 숫자를 줄이거 나 늘려서 얼마나 빨리 고정을 수행하는지 제어 할 수 있습니다. 그러나 대부분의 경우 expectPin이 필요하지 않습니다 (기본값은 0).
end	String \| Number \| Function-ScrollTrigger의 끝 위치를 결정합니다. 다음 중 하나 일 수 있습니다. String-endTrigger의 위치 (또는 정의되지 않은 경우 트리거) 및 ScrollTrigger를 종료하기 위해 충족해야 하는 스크롤러의 위치를 설명합니다. 예를 들어 "하단 가운데"는 "끝의 하단이 스크롤러의 중심에 닿을 때"를 의미합니다. "center 100px"는 "종료 스크롤의 상단에서 endTrigger의 중심이 80 % 아래로 내려갈 때"(수직 스크롤 가정)를 의미합니다. "top", "bottom", "center"(또는 가로 : true 인 경우 "left"및 "right")와 같은 키워드 또는 "80 %"와 같은 백분율 또는 "100px"와 같은 픽셀 값을 사용할 수 있습니다. 백분율과 픽셀은 항상 요소 / 뷰포트의 상단 / 왼쪽을 기준으로 합니다. "+ = 300"과 같은 단일 상대 값을 정의 할 수도 있습니다. "+ = 100"은 "시작 위치보다 300px 이상"또는 "+ = 100 %"는 "시작 위치보다 스크롤러의 높이"를 의미합니다. Number-정확한 스크롤 값이므로 뷰포트 / 스크롤러가 정확히 200 픽셀 씩 스크롤 할 때 200이 트리거 됩니다. Function-ScrollTrigger가 새로 고쳐지고 위치를 계산할 때마다 (일반적으로 생성시 및 스크롤러의 크기가 조정될 때마다) 호출되는 함수입니다. 위에서 설명한대로 문자열 또는 숫자를 반환해야합니다. 이를 통해 동적으로 값을 쉽게 계산할 수 있습니다. 이것은 일반적인 문서 흐름의 위치에 따라 ScrollTrigger를 만들 때와 스크롤러의 크기를 조정할 때 계산되는 정적 위치입니다. 지속적으로 다시 계산되지 않으므로 예를 들어 트리거 / 종료 트리거에 애니메이션을 적용하는 경우 ScrollTrigger가 성능에 최적화되어 있기 때문에 시작 / 종료 값을 지속적으로 업데이트하지 않습니다. ScrollTrigger.refresh()를 호출하여 항목을 다시 계산할 수 있습니다. 유형의 기본값 : "toggle"ScrollTriggers : "bottom top"; 유형 : "progress": "bottom center".
endTrigger	String \| Element-일반 문서 흐름에서의 위치가 ScrollTrigger가 끝나는 위치를 계산하는 데 사용되는 요소 (또는 요소의 선택기 텍스트)입니다. endTrigger가 기본값이기 때문에 트리거 요소보다 다른 경우가 아니면 endTrigger를 정의 할 필요가 없습니다.
horizontal	부울-기본적으로 설정에서 세로 스크롤을 사용하지만 가로를 설정한다고 가정합니다. 가로 스크롤을 사용하는 경우 true입니다.
id	String-ScrollTrigger.getById ()와 함께 사용할 수있는 ScrollTrigger 인스턴스의 임의의 고유 식별자입니다. 이 ID는 마커에도 추가됩니다.
markers	객체 \| 부울-개발 / 문제 해결 중에 도움이 되는 마커를 추가합니다. 마커 : true는 기본값 (startColor : "green", endColor : "red", fontSize : "16px", fontWeigth : "normal", indent : 0)으로 추가하지만 마커와 같은 객체를 사용하여 맞춤 설정할 수 있습니다. { startColor : "white", endColor : "white", fontSize : "18px", fontWeight : "bold", 들여 쓰기 : 20}.
once	Boolean-true이면 끝 위치에 한 번 도달하면 ScrollTrigger가 자체적으로 kill ()됩니다. 이로 인해 스크롤 이벤트 수신이 중지되고 가비지 수집에 적합합니다. 이것은 onEnter를 최대 한 번만 호출합니다. 연결된 애니메이션을 종료하지 않습니다. 앞으로 스크롤 할 때 애니메이션을 한 번만 재생하고 다시 설정하거나 재생하지 않는 경우에 적합합니다. 또한 toggleActions를 "play none none none"으로 설정합니다.
onEnter	Function-스크롤 위치가 "시작"을지나 앞으로 이동할 때 (일반적으로 트리거가 스크롤 되어 볼 때)에 대한 콜백입니다. 그것은 progress, direction, isActive 및 getVelocity()와 같은 속성 / 방법을 가진 ScrollTrigger 인스턴스 자체의 매개 변수를 받습니다. 예: onEnter: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
onEnterBack	Function-스크롤 위치가 "종료"를지나 뒤로 이동하는 경우에 대한 콜백 (일반적으로 트리거가 다시 보기로 스크롤 될 때). 그것은 progress, direction, isActive 및 getVelocity ()와 같은 속성 / 방법을 가진 ScrollTrigger 인스턴스 자체의 매개 변수를받습니다. 예: onEnterBack: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
onLeave	Function-스크롤 위치가 "종료"를지나 앞으로 이동할 때 (일반적으로 트리거가 스크롤되지 않은 경우)에 대한 콜백입니다. 그것은 progress, direction, isActive 및 getVelocity ()와 같은 속성 / 방법을 가진 ScrollTrigger 인스턴스 자체의 매개 변수를받습니다. 예: onLeave: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
onLeaveBack	Function-스크롤 위치가 "시작"을 지나 뒤로 이동하는 경우에 대한 콜백 (일반적으로 트리거가 시작을 지나 끝까지 스크롤 될 때). 그것은 progress, direction, isActive 및 getVelocity ()와 같은 속성 / 방법을 가진 ScrollTrigger 인스턴스 자체의 매개 변수를 받습니다. 예: onLeaveBack: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
onRefresh	Function-새로 고침이 발생할 때 (일반적으로 크기 조정 이벤트)에 대한 콜백으로 ScrollTrigger가 모든 위치를 다시 계산하도록 합니다. 그것은 progress, direction, isActive 및 getVelocity ()와 같은 속성 / 방법을 가진 ScrollTrigger 인스턴스 자체의 매개 변수를 받습니다. 예: onRefresh: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
onUpdate	Function-ScrollTrigger의 진행률이 변경 될 때마다 호출되는 콜백입니다. 그것은 progress, direction, isActive 및 getVelocity ()와 같은 속성 / 방법을 가진 ScrollTrigger 인스턴스 자체의 매개 변수를 받습니다. 예: onUpdate: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
onScrubComplete	Function-스크럽이 완료되었을 때의 콜백. 이것은 스크럽에 스무딩 및 / 또는 스냅을 적용 할 때만 유용합니다. 콜백은 하나의 매개 변수를 받습니다. ScrollTrigger 인스턴스 자체에는 progress, direction, isActive 및 getVelocity ()와 같은 속성 / 방법이 있습니다. 예:
onSnapComplete	Function-스냅이 완료된 시점에 대한 콜백. 이것은 스냅이 정의 된 경우에만 적용됩니다. 사용자 (또는 다른 것)가 스크롤과 어떤 방식 으로든 상호 작용하면 스냅이 취소되므로 이 경우 onSnapComplete가 전혀 트리거 되지 않습니다. 콜백은 하나의 매개 변수를 받습니다. ScrollTrigger 인스턴스 자체에는 progress, direction, isActive 및 getVelocity ()와 같은 속성 / 방법이 있습니다. 예: onSnapComplete: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
onToggle	Function-스크롤 위치가 "시작"또는 "종료"를 지나서 어느 방향으로든 이동할 때의 콜백입니다. 기본적으로 ScrollTrigger가 상태를 전환 할 때 그것은 progress, direction, isActive 및 getVelocity ()와 같은 속성 / 방법을 가진 ScrollTrigger 인스턴스 자체의 매개 변수를 받습니다. 예: onToggle: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
pin	부울 \| 문자열 \| Element-ScrollTrigger가 활성화 된 시간 동안 고정되어야 하는 요소 (또는 요소의 선택기 텍스트)입니다. 즉, 나머지 내용이 계속 스크롤 되는 동안 시작 위치에 "고정"된 것으로 나타납니다. 고정 된 요소는 하나만 허용되지만 원하는 수의 요소를 포함 할 수 있습니다. 핀 설정 : 사실하면 트리거 요소를 고정하게 됩니다. 고정 된 요소 자체에는 애니메이션이 적용되지 않으므로 측정이 중단됩니다 (ScrollTrigger는 성능에 최적화되어 있으며 가능한 한 미리 계산됩니다). 대신 고정 된 요소 내부의 요소에만 애니메이션을 적용하도록 항목을 중첩 시킬 수 있습니다.
pinReparent	Boolean-true 인 경우 고정 된 요소는 <body>에 고정되어 있으며, 고정 된 요소는 블록을 포함하는 조상을 벗어날 수 있습니다. 고정 된 요소가 갑자기 이동하고 스크롤과 함께 움직이는 것처럼 고정하는 동안 이상한 동작을 발견하면 위치를 깰 조상 요소에 변형 또는 의지가 있을 수 있습니다. 고정 된 동작 (ScrollTrigger가 아닌 브라우저의 것입니다) . 양육비가 비쌀 수 있기 때문에 프로젝트를 피하는 것이 가장 좋지만 pinReparent : true는 피할 수 없으면 구제 할 수 있습니다. 필요한 경우에만 이 기능을 사용하십시오. 경고 : 부모에 의해 영향을 받는 특정 중첩에 의존하는 CSS 규칙이 있는 경우 규칙이 깨집니다. 예를 들어, .section .panel p {color : white}와 같은 CSS 규칙은 pinReparent :로 .panel 요소를 고정하면 더 이상 중첩 된 <p>에 적용되지 않습니다. 핀 동안 더 이상 내부에 있지 않기 때문에 true <섹션>이므로 부모 지정을 수용하기 위해 CSS 규칙을 작성해야 합니다.

ScrollTrigger는 어떻게 작동합니까? IntersectionObserver와 같은 것입니까?

ScrollTrigger는 모든 요소를 지속적으로 감시하지 않으며 각 눈금의 뷰포트에서 해당 위치를 확인합니다. 우리는 성능에 집착하고 있으며 너무 비싸다. 대신, ScrollTrigger는 처리를 사전에 수행하여 시작 / 종료 지점이 자연스러운 문서 흐름에서 어디에 있는지 파악합니다. 즉, "이 ScrollTrigger는 스크롤 막대가 ___와 ____ 사이에있을 때 활성화됩니다". 그런 다음 "스크롤"이벤트를 선언하고 다음 requestAnimationFrame의 항목 만 업데이트하며 GSAP 및 화면 새로 고침과 완벽하게 동기화 됩니다. 스크롤 위치 만 감시합니다. 기간. 그것은 빠르다는 것을 의미합니다.

ScrollTrigger는 자동으로 뷰포트 / 스크롤러 "크기 조정"이벤트를 수신하고 이에 따라 모든 시작 / 종료 위치를 다시 계산합니다 (onRefresh). 실제로 크기 조정 / 새로 고침은 CPU를 많이 사용하므로 작업을 시작하기 전에 크기 조정 이벤트가 200ms 간격이 될 때까지 기다립니다. 예, 우리는 성능을 극대화 할 수 있는 모든 기회를 찾았습니다.

IntersectionObserver는 대부분의 최신 브라우저에서 다음과 같은 방식으로 다른 기본 기능입니다.