GSAP Draggable轮播设置repeat:-1后拖拽异常的修复求助

当给GSAP的horizontalLoop设置repeat: -1开启无限循环后，拖拽轮播会出现位置错乱，核心原因是：无限循环时动画进度会无限累加（比如第二圈进度为1-2、第三圈为2-3……），但horizontalLoop内置的拖拽逻辑默认基于0-1范围的单次循环进度计算位置，两者不匹配导致失控。

以下是两种可行的修复方案：

方法一：拖拽开始时修正进度（无需修改horizontalLoop源码） #

不直接在horizontalLoop参数中传repeat: -1，而是手动开启循环后，监听拖拽开始事件，将时间线进度重置为当前循环周期内的相对进度：

// 创建轮播实例（暂不设置repeat）
const loop = horizontalLoop(boxes, { paused: false, draggable: true });
// 开启无限循环
loop.repeat(-1);
// 修复拖拽逻辑
loop.draggable.addEventListener("dragstart", () => {
  let currentProgress = loop.progress();
  // 取模得到0-1范围内的循环进度，兼容反向播放的负数情况
  currentProgress = currentProgress % 1;
  if (currentProgress < 0) currentProgress += 1;
  loop.progress(currentProgress);
});

方法二：修改horizontalLoop内部同步逻辑（更彻底） #

找到horizontalLoop函数中负责同步拖拽与动画进度的sync方法，将进度计算改为基于循环后的相对进度：

// 替换原sync方法中的进度获取代码
// let progress = this.progress();

// 修改为：
let progress = this.progress() % 1;
if (progress < 0) progress += 1;

修改后，无论动画循环多少次，拖拽逻辑都会基于当前周期内的0-1进度计算位置，从根源避免错乱。

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