GSAP ScrollTrigger未按预期工作

Question

我正在尝试一个简单的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，但我不知道这是否会影响它。

Answer 1

为了同时使用火车头卷轴和ScrollTrigger，你需要设置一个.scrollerProxy()并将东西连接起来作为the documentation封面。甚至有an example demo演示了如何使用火车头卷轴来做到这一点。