motion.div横向无限滚动动画存在可见重置问题求助

你遇到的问题是因为动画从0%滚到-100%后会瞬间跳回初始位置，导致视觉上的断层。要实现无缝无限滚动，核心是让滚动内容在视觉上保持连续，具体做法如下：

核心思路 #

把滚动内容复制一份，让容器内有两套完全相同的元素，然后调整动画滚动距离为容器总宽度的一半——当第一套元素完全滚出视口时，第二套刚好接上，循环时就不会出现重置闪断。

修改后的代码 #

<motion.div
    className="flex gap-9 flex-none"
    animate={{ x: ['0%', '-50%'] }}
    transition={{
        repeat: Infinity,
        repeatType: 'loop',
        duration: 45,
        ease: 'linear',
    }}
>
    {/* 复制元素确保视觉连续，同时添加唯一key避免React警告 */}
    {[...elements, ...elements].map((el, idx) => (
        <div key={`scroll-item-${idx}`}>{el}</div>
    ))}
</motion.div>

关键细节说明 #

• 移除原代码中的pr-14：复制内容后额外内边距会导致衔接处出现间隙，破坏滚动连续性
• 调整动画x值为0%到-50%：容器总宽度是原内容的两倍，滚动50%刚好让第一套元素完全移出，第二套元素到达初始位置
• 添加唯一key：符合React列表渲染要求，避免控制台警告
• 父容器需设置overflow: hidden：隐藏超出视口的内容，只显示当前可见区域

内容的提问来源于stack exchange，提问作者Duetemu2