GSAP ScrollTrigger not working as intended

Question

I'm trying a simple ScrollTrigger animation where my text would move at the x-axis as I scroll. However, it just doesn't move at all.

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>

This is the first time I'm using GSAP but this should be simple enough. I am also using locomotive.js but I don't know if that would affect it.

Answer 1

In order to use Locomotive Scroll and ScrollTrigger together you need to set up a .scrollerProxy() and hook things up as the documentation covers. There's even an example demo that shows how to do so with Locomotive Scroll.