ScrollTrigger - Greensock 动画

如何解决ScrollTrigger - Greensock 动画

我只是想用 scrolltrigger 为 svg 制作动画，但不知道为什么它不起作用...

function introAnim() {
  gsap.registerPlugin(ScrollTrigger);
  duration = 2;
  ease = 'defaultEase';

  let animationSvg = document.querySelector('.intro-animation svg'),groups = document.querySelectorAll('.intro-animation svg g'),r = document.querySelectorAll('.intro-animation svg .right'),first = document.querySelectorAll('.intro-animation svg .first'),last = document.querySelectorAll('.intro-animation svg .last'),l = document.querySelectorAll('.intro-animation svg .right'),masksSvg = document.querySelectorAll('.intro-animation mask rect');


  gsap.set(groups,{
    yPercent: 500
  })
  gsap.set(masksSvg,{
    scaleY: 0,transformOrigin: '50% 0%'
  })

  var tl = gsap.timeline({
    defaults: { 
      duration: duration,ease: ease
    },});


  tl
    .addLabel('start')
    .to(groups,{
      yPercent: 0,stagger: 0.1
    },'start')
    .to(masksSvg,{
      scaleY: 1,'start')
    .to(r,{
      scrollTrigger: {
        trigger: first,markers: true,toggleActions: "restart pause reverse pause",start: "top center",end: "bottom center",endTrigger: last
      },x: 1000,duration: 5
      
    })


}
introAnim();

.intro-animation {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 98;
  overflow: hidden;
}
  
.bg-intro {
  height: 100vh;
  overflow: auto;
  width: 100%;
  position: relative;
}
svg {
  width: 70%;
  margin: 30% 0 10% 10%;
}

<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<div class="intro-animation stat-2">
    <div class="bg-intro">
    <svg viewBox="0 0 1392.73 1153.2" >

      <mask id="intro-1">
        <rect x="0" y="0.53" style="fill:#FFF;" width="1300" height="170"/>
      </mask>
      <mask id="intro-2">
        <rect x="0" y="190" style="fill:#FFF;" width="1300" height="210"/>
      </mask>
      <mask id="intro-3">
        <rect x="0" y="390" style="fill:#FFF;" width="1300" height="180"/>
      </mask>
      <mask id="intro-4">
        <rect x="0" y="585" style="fill:#FFF;" width="1300" height="180"/>
      </mask>
      <mask id="intro-5">
        <rect x="0" y="785" style="fill:#FFF;" width="1300" height="220"/>
      </mask>
      <mask id="intro-6">
        <rect x="0" y="985" style="fill:#FFF;" width="1300" height="180"/>
      </mask>

      <g class="intro-lines r first" mask="url(#intro-1)">
        <path class="cls-1" d="M12,5.67H42L39.27,61.06H14.75Zm41.31,0h30L80.58,61.06H56.06Z"/>
        <path class="cls-1" d="M267.92,169.1H238.87L204.37,50.16h-.46L169.41,169.1h-29L89.74,5.67h32.69l32.23,119.17h.45L190.29,5.67H218l35.18,119.17h.46L287.21,5.67h31.32Z"/>
        <path class="cls-1" d="M393.27,130.51l28.37,3.86c-11.35,27.46-31.09,37-55.38,37-34.73,0-60.37-25-60.37-62.42s25.64-62.42,58.33-62.42c31.78,60.15,22.7,71.27h-89c2.05,19.29,15.66,29.51,31.1,29.51C379.2,147.31,388.73,141,393.27,130.51Zm-58.1-33.59h59c-2.95-15.21-15.21-26.1-29.51-26.1S338.12,81.71,335.17,96.92Z"/>
        <path class="cls-1" d="M581.88,169.1H555.1c-.45-4.54-.68-11.58-.68-15.44H554c-10.9,13.39-24.52,17.71-38.14,17.71-24.06,0-41.53-14.3-41.53-37.45,0-17.94,11.57-35,43.58-36.32,14.52-.68,35.63-.91,35.63-.91V90.56c0-14.75-12.26-21.79-25-21.79s-22.47,7-24.06,18.16H476.34c1.36-25.65,22.47-40.4,52.43-40.4,30.19,52,18.84,47.21v36.32C580.75,151.85,581,161.61,581.88,169.1Zm-56.06-51.75c-17,.9-23.38,7.26-23.38,16.11,10.21,8.17,15.43,19.75,17,31.32-10.44,31.32-28.14v-4.54S538.3,116.67,525.82,117.35Z"/>
        <path class="cls-1" d="M624.3,48.8V62.42h.46c6.12-7.72,15-14.53,31.09-14.53a33.92,33.92,1,8.85,1.36V76.49a53.24,53.24,0-11.57-1.36c-20.43,0-28.83,8.85-28.83,28.37v65.6H597.07V48.8Z"/>
        <path class="cls-1" d="M750.34,27.46-31.1,0-60.38-25-60.38-62.42s25.65-62.42,71.27h-89c2,31.09,29.51C736.26,745.8,750.34,130.51ZM692.23,96.92h59c-3-15.21-15.21-26.1-29.51-26.1S695.18,692.23,96.92Z"/>
        <path class="cls-1" d="M865.41,1.13v168H838.17V1.13Z"/>
        <path class="cls-1" d="M879.35,18.16a18.16,18.16,36.31,1-36.31,0ZM911.12,48.8V169.1H883.88V48.8Z"/>
        <path class="cls-1" d="M978.87,104.63l55.84,64.47H998.39l-41.31-52.89h-.45v53.11H929.39V1.13h27.24V94h.45L996.35,48.8h37.22Z"/>
        <path class="cls-1" d="M1111.35,130.51l28.38,37-55.39,37-34.72,0-60.37-25-60.37-62.42s25.65-62.42,29.51C1097.28,1106.81,1111.35,130.51Zm-58.1-33.59h59c-3-15.21-15.21-26.1-29.51-26.1S1056.2,1053.25,96.92Z"/>
      </g>
      <g class="intro-lines l" mask="url(#intro-2)">
        <path class="cls-1" d="M151.85,365.46H123.93l-27.24-81-27.24,81H40.86L0,245.17H30.42l25.42,85.11h.45l28.14-85.11H109l28.6,85.11H138l23.83-85.11h29.51Z"/>
        <path class="cls-1" d="M294.16,365.46H267.37c-.45-4.54-.68-11.57-.68-15.43h-.45c-10.9,17.7-38.13,17.7-24.06,0-41.54-14.3-41.54-37.45,0-17.93,11.58-34.95,14.53-.68,35.63-.9,35.63-.9v-6.13c0-14.75-12.25-21.79-25-21.79s-22.47,18.16H188.61c1.36-25.65,18.83,47.21v36.31C293,348.21,293.25,358,294.16,365.46Zm-56.07-51.75c-17,.91-23.38,16.12,8.18,31.32-28.14v-4.54S250.58,313,238.09,313.71Z"/>
        <path class="cls-1" d="M347,269.68v53.79c0,16.34,10,17.93,4.32,7.49-.68,12.49-2.95v24.51A43,43,362,366.82c-22.92,0-42.21-11.35-42.21-44V269.68h-25V245.17h25v-31.1L347,206.13v39h30.42v24.51Z"/>
        <path class="cls-1" d="M464.47,326.88l28.37,3.85c-11.34,27.47-31.09,0-60.37-25-60.37-62.42s25.65-62.41,58.33-62.41c31.78,22.69,15.67,29.5,29.5C450.4,343.67,459.93,337.32,464.47,326.88Zm-58.1-33.6h59c-2.95-15.2-15.21-26.1-29.51-26.1S409.32,278.08,406.37,293.28Z"/>
        <path class="cls-1" d="M533.15,245.17v13.61h.46c6.13-7.71,15-14.52,31.09-14.52a33.5,33.5,1.36v27.24A53.28,53.28,562,271.49c-20.43,8.86-28.83,28.38v65.59H505.92V245.17Z"/>
        <path class="cls-1" d="M566,339.59h30.87L580.52,395H556.23Z"/>
        <path class="cls-1" d="M792.28,365.46H764.37l-27.24-81-27.24,81h-28.6L640.44,245.17h30.41l25.42,85.11h.46l28.14-85.11h24.52L778,330.28h.46l23.83-85.11h29.51Z"/>
        <path class="cls-1" d="M831.73,214.52a18.16,18.16A18.06,18.06,831.73,214.52Zm31.77,30.65V365.46H836.27V245.17Z"/>
        <path class="cls-1" d="M920.38,4.31,12.49-2.95v24.51a43,1-15.44,2.95c-22.92,0-42.22-11.35-42.22-44V269.68h-25V245.17h25v-31.1l27.24-7.94v39H950.8v24.51Z"/>
        <path class="cls-1" d="M1063.83,291.7v73.76h-27.24V294.87c0-18.16-7.94-27.23-20.65-27.23-16.12,0-27.47,12.25-27.47,29.73v68.09H961.23v-168h27.24v62.42h.46c5.67-8.85,17.7-17,33.59-17C1044.31,242.9,1063.83,257.2,291.7Z"/>
      </g>
      <g class="intro-lines r" mask="url(#intro-3)">
        <path class="cls-1" d="M10.9,410.89a18.16,1-18.16,18.16A17.93,10.9,410.89Zm31.77,30.64v120.3H15.43V441.53Z"/>
        <path class="cls-1" d="M174.93,561.83H147.69V548.21h-.45c-7.72,7.72-19.52,15.89-37.68,15.89-31.32,0-55.84-25-55.84-62.42s24.52-62.42,55.84-62.42c18.16,30,37.68,15.89h.45V393.87h27.24ZM81.87,501.68c0,22,14.52,37,33.14,37s33.13-15,33.13-37-14.52-37-33.13-37S81.87,479.66,81.87,501.68Z"/>
        <path class="cls-1" d="M273.22,523.24l28.38,19.3,29.51C259.15,540,268.69,533.68,273.22,523.24Zm-58.1-33.59h59c-2.95-15.21-15.2-26.1-29.5-26.1S218.07,474.44,215.12,489.65Z"/>
        <path class="cls-1" d="M415.42,561.83H388.64c-.45-4.54-.68-11.58-.68-15.44h-.46c-10.89,13.4-24.51,17.71-38.13,35.63-.91v-6.13c0-14.75-12.26-21.78-25-21.78s-22.47,18.15H309.88c1.36-25.64,47.21v36.32C414.29,544.58,414.51,554.34,415.42,561.83Zm-56.06-51.75c-17,10.22,15.44,31.32-28.15v-4.54S371.84,509.4,359.36,510.08Z"/>
        <path class="cls-1" d="M475.48,564.1c-30.19,0-49.48-14.3-52.21-38.81h30.19C456,536.63,464.13,541,474.8,541c10.89,19.29-4.09,19.29-11.35,0-8.63-9.31-11.35-26.78-15.44-19.3-4.54-42-10.89-42-37.45,0-20.88,20.2-37.45,46.07-37.45,27.47,46.76,15.21,49.48,38.59H491.82c-1.36-8.4-8.17-15.44-20.65-15.44-10.22,0-17.71,5.22-17.71,12.26,12.94,12,38.81,35.86C522.23,548.66,502.94,564.1,475.48,564.1Z"/>
        <path class="cls-1" d="M619.83,466v53.8c0,12.48-2.95v24.51a43.16,43.16,1-15.43,3c-22.92,0-42.22-11.35-42.22-44V466h-25V441.53h25V410.44l27.24-7.95v39h30.41V466Z"/>
        <path class="cls-1" d="M763.27,488.06v73.77H736V491.24c0-18.16-7.95-27.24-20.66-27.24-16.11,0-27.46,12.26-27.46,29.74v68.09H660.68v-168h27.24v62.42h.45c5.68-8.86,17.71-17,33.6-17C743.75,439.26,763.27,453.56,488.06Z"/>
        <path class="cls-1" d="M881.14,561.83H854.36c-.46-4.54-.68-11.58-.68-15.44h-.46c-10.89,11.58-35,35.64-.91,35.64-.91v-6.13c0-14.75-12.26-21.78-25-21.78s-22.47,18.15H775.6C777,454,798.07,828,439.26c30.19,47.21v36.32C880,880.23,881.14,31.32-28.15v-4.54S837.56,825.08,510.08Z"/>
        <path class="cls-1" d="M934,12.48-2.95v24.51a43.2,43.2,3c-22.93,0-42.22-11.35-42.22-44V466h-25V441.53h25V410.44L934,402.49v39h30.41V466Z"/>
      </g>
      <g class="intro-lines l" mask="url(#intro-4)">
        <path class="cls-1" d="M1.82,637.9H22.24v-5.45c0-32.68,19.3-44.49,42.22-44.49a43,3v24.51c-5-2.27-8.18-2.95-12.49-2.95-7.94,3.63-17.93,17v8.4H80.12v24.51H49.48V758.2H22.24V662.41H1.82Z"/>
        <path class="cls-1" d="M111.13,590.23v168H83.89v-168Z"/>
        <path class="cls-1" d="M121.52,698.27c0-35.18,26.78-62.19,61.51-62.19s61.51,27,61.51,62.19S217.76,760.46,183,121.52,733.46,698.27Zm94.88,0c0-21.56-14.3-36.77-33.37-36.77s-33.36,15.21-33.36,36.77S164,735,216.4,719.84,698.27Z"/>
        <path class="cls-1" d="M389.69,758.2H361.77l-27.23-81-27.24,81H278.7L237.84,637.9h30.42L293.68,723h.45l28.15-85.11h24.51L375.39,723h.45l23.84-85.11h29.5Z"/>
        <path class="cls-1" d="M580.34,758.2H553.56c-.45-4.54-.68-11.58-.68-15.44h-.45c-10.9,17.7-38.14,17.7-24,0-41.53-14.29-41.53-37.45,43.58-36.31,35.63-.91v-6.13c0-14.75-12.25-21.79-25-21.79s-22.47,7-24.05,18.16H474.8c1.36-25.65,47.21v36.32C579.21,741,579.44,750.71,580.34,758.2Zm-56.06-51.75c-17,31.32-28.14v-4.54S536.76,705.76,524.28,706.45Z"/>
        <path class="cls-1" d="M622.76,637.9v14.75h.46c5.67-8.85,33.59-17,21.79,41.31,14.3,48.8V758.2H670.88V687.61c0-18.16-7.94-27.24-20.65-27.24-16.12,12.26-27.47,29.73v68.1H595.53V637.9Z"/>
        <path class="cls-1" d="M829.17,758.2H801.93V744.58h-.45c-7.72,7.71-19.52,15.88-37.68,15.88-31.32,0-55.83-25-55.83-62.41s24.51-62.42,55.83-62.42c18.16,15.89h.45V590.23h27.24Zm-93.06-60.15c0,14.53,37s33.14-15,33.14-37-14.53-37-33.14-37S736.11,676,736.11,698.05Z"/>
        <path class="cls-1" d="M933.57,662.41v53.8c0,7.5-.68,12.49-2.95v24.52a43.26,43.26,0-42.21-11.35-42.21-44V662.41h-25V637.9h25V606.8l27.23-7.94v39H964v24.51Z"/>
        <path class="cls-1" d="M1073.32,758.2h-26.78c-.46-4.54-.68-11.58-.68-15.44h-.46c-10.89,13.39-24.51,0-41.54-14.29-41.54-37.45,35.64-.91v-6.13c0-14.75-12.26-21.79-25-21.79s-22.47,18.16H967.78c1.36-25.65,30.18,47.21v36.32C1072.18,1072.41,1073.32,19.74,31.33-10.44,31.33-28.14v-4.54S1029.74,1017.26,706.45Z"/>
        <path class="cls-1" d="M1138,693.73l55.84,64.47H1157.5l-41.31-52.89h-.45v53.11H1088.5V590.23h27.24v92.84h.45l39.27-45.17h37.22Z"/>
        <path class="cls-1" d="M1270.47,719.61l28.37,0-60.38-25-60.38-62.41s25.65-62.42,29.51C1256.39,736.41,1265.93,730.05,1270.47,719.61ZM1212.36,686h59c-2.95-15.21-15.2-26.1-29.5-26.1S1215.31,670.81,1212.36,686Z"/>
      </g>
      <g class="intro-lines r" mask="url(#intro-5)">
        <path class="cls-1" d="M58.56,956.83c-30.19,0-49.48-14.3-52.2-38.81H36.54c2.5,11.35,10.67,21.34,10.89,0-8.62-9.3-11.35-26.78-15.43-19.29-4.54-42-10.9-42-37.45C8.4,848.56,28.6,832,54.47,832c27.47,15.2,38.58h-29c-1.36-8.4-8.17-15.43-20.65-15.43-10.22,12.25,38.82,35.86C105.32,941.4,86,956.83,58.56,956.83Z"/>
        <path class="cls-1" d="M219.1,880.79v73.77H191.86V884c0-18.16-7.94-27.23-20.65-27.23-16.12,29.73v68.09H116.5v-168h27.24V849h.46c5.67-8.85,33.59-17C199.58,219.1,846.29,880.79Z"/>
        <path class="cls-1" d="M337,954.56H310.18c-.45-4.54-.68-11.57-.68-15.43H309c-10.89,35.63-.9V876c0-14.75-12.26-21.79-25-21.79s-22.47,18.16H231.42c1.36-25.65,47.21v36.31C335.83,937.31,336.05,947.07,337,954.56ZM280.9,902.81c-17,31.32-28.14v-4.54S293.38,902.13,280.9,902.81Z"/>
        <path class="cls-1" d="M379.84,940.94h-.46v57.88H352.14V834.26h27.24v13.62h.46c7.71-7.71,19.52-15.88,37.67-15.88,31.33,55.84,25,62.41s-24.51,62.42-55.84,62.42C399.36,387.55,948.66,379.84,940.94Zm-.91-46.53c0,33.13-37-14.52-37-33.13-37S378.93,872.4,378.93,894.41Z"/>
        <path class="cls-1" d="M565,916l28.37,3.85c-11.35,27.47-31.1,0-60.38-25-60.38-62.42S503.26,535.94,832c31.78,29.5C550.92,932.77,560.46,926.42,565,916Zm-58.11-33.6h59c-3-15.2-15.21-26.1-29.51-26.1S509.84,867.18,506.89,882.38Z"/>
        <path class="cls-1" d="M641.48,834.26h20.43v-5.44c0-32.69,19.29-44.49,42.22-44.49a43.16,2.95v24.51c-5-2.27-8.17-2.95-12.48-2.95-7.94,3.64-17.93,17v8.39h30.64v24.52H689.15v95.78H661.91V858.78H641.48Z"/>
        <path class="cls-1" d="M715.75,894.64c0-35.18,62.19S812,777.26,715.75,929.82,894.64Zm94.87,0c0-21.56-14.29-36.77-33.36-36.77s-33.37,15.21-33.37,36.77,33.37,36.77S810.62,916.2,810.62,894.64Z"/>
        <path class="cls-1" d="M876.49,834.26v13.62H877c6.12-7.71,31.09-14.52a33.56,33.56,1.36V862a53.35,53.35,0-11.57-1.37c-20.43,28.38v65.59H849.25V834.26Z"/>
        <path class="cls-1" d="M1083,834.26,1015.62,1000H986.79l19.75-45.4L958.2,834.26h30.86l31.33,86.26h.45l32.23-86.26Z"/>
        <path class="cls-1" d="M1073.45,62.19-26.78,62.19-61.51,62.19S1073.45,1073.45,894.64Zm94.88,33.36,36.77S1168.33,1168.33,894.64Z"/>
        <path class="cls-1" d="M1206,911.21v-77h27.24v70.59c0,7.48,27.24,20.2,27-12.26,27-29.73v-68.1h27.23v120.3h-27.23V940.94H1280c-6.81,7.72-17,15.89-36.09,15.89C1222.07,1206,942.08,911.21Z"/>
        <path class="cls-1" d="M1352.33,834.26v13.62h.46c6.12-7.71,1.36V862a53.28,28.38v65.59H1325.1V834.26Z"/>
      </g>
      <g class="intro-lines l last" mask="url(#intro-6)">
        <path class="cls-1" d="M13.17,983H40.4v63.55h.46c6.81-9.08,19.52-18.16,37.67-18.16,62.42s-24.51,62.42c-18.15,0-30.86-9.08-37.67-18.16H40.4v15.89H13.17ZM40,1090.78c0,33.13-37-14.52-37-33.13-37S40,1068.76,40,1090.78Z"/>
        <path class="cls-1" d="M172.52,1030.63v13.62H173c6.13-7.72,31.1-14.53a34,34,1.36v27.24a53.31,53.31,28.37v65.6H145.28v-120.3Z"/>
        <path class="cls-1" d="M320.5,1150.93H293.72c-.45-4.54-.68-11.58-.68-15.44h-.46c-10.89,18.15H215c1.36-25.64,47.21v36.32C319.37,1133.68,319.59,1143.44,320.5,1150.93Zm-56.06-51.75c-17,31.32-28.15V1098S276.92,1098.5,264.44,1099.18Z"/>
        <path class="cls-1" d="M362.92,1030.63v14.75h.46c5.67-8.85,48.8v73.77H411v-70.59c0-18.16-7.94-27.24-20.65-27.24-16.12,29.73v68.1H335.68v-120.3Z"/>
        <path class="cls-1" d="M569.33,1150.93H542.09v-13.62h-.45c-7.72,0-55.83-25-55.83-62.42s24.51-62.42,15.89h.45V983h27.24Zm-93.06-60.15c0,33.14-37-14.53-37-33.14-37S476.27,476.27,1090.78Z"/>
        <path class="cls-1" d="M584.83,987.51h30l-2.72,55.38H587.55Zm41.31,0h30l-2.73,55.38H628.86Z"/>
        <path class="cls-1" d="M653.26,1134.59c0-9.31,8.4-18.16,18.16-18.16s18.15,18.15,18.16c0,9.53-8.62,18.15-18.15,18.15S653.26,1144.12,653.26,1134.59Z"/>
      </g>
    </svg>
  </div>
</div>

发生的第一个动画是每一行从底部出现（他们有一个面具，所以在他们做 Y 动画之前没人能看到它们）但我希望他们在进入视口时做 Y 动画

然后，我只想实现，当 svg 的组穿过窗口视口的中心时，具有“r”类的那些离开到右侧，而具有“l”类的那些离开到左侧（每个动画都在每个动画穿过中心时发生）

不知道为什么这不起作用