不用useEffect 代替 useGSAP

useGSAP 會在組件掛載時自動初始化動畫，並在組件卸載時自動清理動畫。
避免了手動清理動畫的麻煩（例如在 useEffect 中需要清理 ScrollTrigger）。
的作用

不用foreach 循环 useGSAP (缺点是start end 没法对准)
使用循环渲染出来的动画开始基线始终错乱无法对齐。

parentRef1.current 一定要有父元素实际对应的ref，确保其实结束位置点准确 start end
一定要确认开始结束标点。

 <div ref={parentRef2} id='part-4' className='w-[100%] h-[860px] bg-[#fff]'>
          <div className='w-[1200px] mx-auto'>
            <div ref={topDivRef2} className='text-[#000] pt-[122px]'>
              <p>
                <span className='font-[500] text-[#000] text-[24px]'>数据研判与舆情监测：</span>
                <span className='text-[24px] font-[300]'>千万级风险地址数据库与舆情监测网络的实时数据抓取</span>
              </p>
              <p className='mt-[25px]'>
                <span className='font-[500] text-[#000] text-[24px]'>区块链合规审计：</span>
                <span className='text-[24px] font-[300]'>智能合约安全监测、节点通信加密等十二维度合规评估</span>
              </p>
              <p className='mt-[25px]'>
                <span className='font-[500] text-[#000] text-[24px]'>链上交易追踪：</span>
                <span className='text-[24px] font-[300]'>直观呈现时间及资金维度的交易特征与定向追踪</span>
              </p>
            </div>
            <div ref={bottomDivRef2} className='text-[#000] mt-[260px] text-right'>
              <p className='text-[24px] font-[300]'>
                全方位案件剖析和打击策略，从数据挖掘、立案侦查到资产处置的一站式全流程服务
              </p>
              <p className='text-[96px]'>虚拟资产案件全流程服务</p>
            </div>
          </div>

直标父元素起始点

// 動畫 1
  useGSAP(
    () => {
      gsap.fromTo(
        [topDivRef1.current, bottomDivRef1.current], // 動畫作用的對象
        { y: index => (index === 0 ? -50 : 50), opacity: 0 }, // 初始狀態
        {
          y: 0, // 終止狀態
          opacity: 1,
          duration: 1,
          scrollTrigger: {
            trigger: parentRef1.current, // 觸發點
            start: 'top 70%', // 動畫開始位置
            end: 'bottom 60%', // 動畫結束位置
            toggleActions: 'play none none none', // 動畫行為
            markers: true, // 開啟 debug 模式
          },
        },
      );
    },
    { scope: parentRef1 },
  );

  useGSAP(
    () => {
      gsap.fromTo(
        [topDivRef2.current, bottomDivRef2.current], // 動畫作用的對象
        { y: index => (index === 0 ? -50 : 50), opacity: 0 }, // 初始狀態
        {
          y: 0, // 終止狀態
          opacity: 1,
          duration: 1,
          scrollTrigger: {
            trigger: parentRef2.current, // 觸發點
            start: 'top 70%', // 動畫開始位置
            end: 'bottom 60%', // 動畫結束位置
            toggleActions: 'play none none none', // 動畫行為
            markers: true, // 開啟 debug 模式
          },
        },
      );
    },
    { scope: parentRef2 },
  );