GSAP ScrollTrigger 未按预期工作

Posted 2023-05-08

【中文标题】GSAP ScrollTrigger 未按预期工作

【英文标题】：GSAP ScrollTrigger not working as intended

【发布时间】：2021-04-23 14:50:55

【问题描述】：

我正在尝试一个简单的 ScrollTrigger 动画，当我滚动时，我的文本会在 x 轴上移动。但是，它根本不动。

html：

<p class="mountain-text">Mountain</p>

CSS：

.mountain-text 
     position: relative;
     top: -200px;
     right: -900px;
     font-size: 40px;

JS：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script>
    gsap.registerPlugin(ScrollTrigger);

        gsap.to('.mountain-text', 
            scrollTrigger: 
                trigger: '.mountain-text',
                scrub: true,
                markers: true
            ,
            x: 200,
            duration: 2
        );
</script>

这是我第一次使用 GSAP，但这应该很简单。我也在使用 locomotive.js，但我不知道这是否会影响它。

【参考方案1】：

为了同时使用 Locomotive Scroll 和 ScrollTrigger，您需要设置一个 .scrollerProxy() 并将其连接为 the documentation 封面。甚至还有 an example demo 展示了如何使用 Locomotive Scroll 来做到这一点。