React 中 GSAP 的无限循环动画以空白而不是无缝延续结束

Question

我正在开发一个 React 项目，我想使用 GSAP 创建无限循环动画。我有一行从左下角到右上角动画的元素。所需的效果是通过在最后一个元素之后插入新元素来无缝地继续动画，从而创建无尽的滚动效果。但是，当动画到达最后一个元素时，它继续显示空白空间，而不是无缝地重新开始。

这是动画逻辑的代码片段：

import { useEffect, useRef } from "react";
import gsap from "gsap";

export default function MoreAboutMe() {
  const tagReelRowRefs = useRef([]);

  useEffect(() => {
    const w = tagReelRowRefs.current[0].scrollWidth;

    tagReelRowRefs.current.forEach((e, i) => {
      if (e) {
        gsap.set(e, { rotate: 45, y: 0, x: 0 });

        let duration = 20 * (i + 1);

        const tl = gsap.timeline();
        tl.to(e, {
          duration: duration,
          y: -w,
          x: -w,
          ease: "none",
          repeat: -1,
        });
      }
    });
  }, []);

  return (
    <div
      className="relative z-10 w-full h-full gap-4 overflow-hidden cursor-default"
    >
      <div
        className="relative flex text-center whitespace-nowrap"
        ref={(el) => (tagReelRowRefs.current[0] = el)}
      >
        {[...Array(6)].map((_, index) => (
          <div
            key={index}
            className={`relative line-height[100%] text-[3.75vw] px-[58px] flex-none uppercase`}
          >
            <div className="w-[300px] h-[200px] bg-white rounded-2xl relative z-10 inline-block text-black">
              l {index}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Answer 1

现在有一个 useGSAP 钩子，使得在 React 环境中使用 GSAP 变得超级简单：

https://gsap.com/resources/React

最后，这个视频应该有助于理解如何创建一个带有交错的无缝循环： https://youtu.be/0DSkgXNFZHs?si=BUXD53GzJixDCIsa