我现在的是到末尾会突然到第一个，怎么写循环平滑的走马灯？

Question

我移动整个卡片，到末尾的时候，我直接瞬移到第一个，再次循环。我想使用无限循环走马灯的那种效果？

html元素

 <div className="right">
    <div className="right_box">
      {[...currentList, ...currentList].map((item, index) => {
        return (
          <div className={`right_list_item`} key={index}>
            <div className="right_list_item_img">
              <img src={item.img} />
            </div>
          </div>
        );
      })}
    </div>
  </div>

 // 走马灯动画
  function loopChangeList() {
    const max = 8;
    gsap.to('.honors_page_content .right_box', {
      transform: `translateX(${-((max - 4) * 3) + 'rem'})`,
      // 直线运动
      ease: 'linear',
      duration: 8,
      // 完成后继续循环，实现走马灯效果，从左倒右一直循环
      onComplete: () => {
        gsap.set('.honors_page_content .right_box', {
          transform: `translateX(0)`,
        });
        loopChangeList();
      },
    });
  }

Answer 1

 // 走马灯动画
  function loopChangeList() {
    const max = 8;
    gsap.to('.honors_page_content .right_box', {
      transform: `translateX(${-((max - 4) * 3) + 'rem'})`,
      // 直线运动
      ease: 'linear',
      duration: 8,
      // repeat: -1, // 无限循环

      // 完成后继续循环，实现走马灯效果，从左倒右一直循环
      onComplete: () => {
        // TODO ? 难道要一个i一个移动再去判断是第几个需要移动？
        // 把前4个元素移动到末尾
        const list = document.querySelectorAll(
          '.honors_page_content .right_box .right_list_item',
        );
        const parent = document.querySelector(
          '.honors_page_content .right_box',
        );
        for (let i = 0; i < 4; i++) {
          const item = list[i];
          parent?.appendChild(item);
        }
        gsap.set('.honors_page_content .right_box', {
          transform: `translateX(0)`,
        });
        loopChangeList();
      },
    });
  }

Answer 2

这玩意弄轮播图组件就行,没必要自己是实现 https://www.swiper.com.cn/demo/index.html