使用 GSAP ScrollTrigger 实现无中断的无限选框效果

Question

我在 JavaScript 中使用 CSS 和 GSAP 实现了一个选取框。使用 GSAP 的 ScrollTrigger，文本向左移动并加速向上滚动，反之亦然。然而，当文本到达末尾时，在重新开始之前会出现明显的间隙，从而扰乱了流程。如何使用 GSAP ScrollTrigger 无缝地保持无限选取框效果？

这是迄今为止我的代码：

`

</div>
<marquee class="marque">
    <div class="marque_inner">
        <div class="marque_part">
            Hello
            <div class="direction">
                <svg viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <ellipse cx="16" cy="15.5" rx="16" ry="15.5" fill="#0F0D0E"/>
                    <path d="M24.2196 16.3536C24.4149 16.1583 24.4149 15.8417 24.2196 15.6464L21.0376 12.4645C20.8424 12.2692 20.5258 12.2692 20.3305 12.4645C20.1353 12.6597 20.1353 12.9763 20.3305 13.1716L23.159 16L20.3305 18.8284C20.1353 19.0237 20.1353 19.3403 20.3305 19.5355C20.5258 19.7308 20.8424 19.7308 21.0376 19.5355L24.2196 16.3536ZM9 16.5H23.8661V15.5H9V16.5Z" fill="#CD2C2C"/>
                    </svg>
            </div>
        </div>
        <div class="marque_part">
            Hello
            <div class="direction">
                <svg viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <ellipse cx="16" cy="15.5" rx="16" ry="15.5" fill="#0F0D0E"/>
                    <path d="M24.2196 16.3536C24.4149 16.1583 24.4149 15.8417 24.2196 15.6464L21.0376 12.4645C20.8424 12.2692 20.5258 12.2692 20.3305 12.4645C20.1353 12.6597 20.1353 12.9763 20.3305 13.1716L23.159 16L20.3305 18.8284C20.1353 19.0237 20.1353 19.3403 20.3305 19.5355C20.5258 19.7308 20.8424 19.7308 21.0376 19.5355L24.2196 16.3536ZM9 16.5H23.8661V15.5H9V16.5Z" fill="#CD2C2C"/>
                    </svg>
            </div>
        </div>`

[https://jsfiddle.net/ek2wo6cz/1/]

我实现了GSAP的ScrollTrigger来根据滚动方向控制动画速度，这对于滚动效果效果很好。然而，挑战在于如何在文本到达滚动区域末尾时实现连续、无限的选取框效果，而不会出现停顿或间隙。我考虑过调整动画参数和触发设置，但还没有找到既能保持平滑滚动控制又能保持无限选框效果的解决方案。 我已经设置了一个 CSS 选取框，其中包含由滚动触发的 GSAP 动画。当文本到达滚动区域的末尾时会出现问题，导致重新启动之前暂停。这个间隙破坏了我想要的连续字幕效果。如何确保文本无缝重新启动而不影响 GSAP ScrollTrigger 功能？

Answer 1

嘿兄弟，我遇到了和你三个月前问的同样的问题，你找到解决方案了吗