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.

It's unclear if you're using `ScrollTrigger` with `Locomotive-Scroll` as the latter is only mentioned in passing in the tags. If `Locomotive-Scroll` is also in use, refer to the answer by @Zach Saucier. — Marc Bosse, Dec 23 '22 at 13:50

score 2 · Accepted Answer · answered Jan 19 '21 at 13:49

2

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.

answered Jan 19 '21 at 13:49

Zach Saucier

24,871
12
85
147

His sample code doesn't show `Locomotive-Scroll` being used at all. – Marc Bosse Dec 23 '22 at 13:47
The text in the question includes "I am also using locomotive.js but I don't know if that would affect it." so I addressed it in my answer. – Zach Saucier Dec 23 '22 at 14:37

GSAP ScrollTrigger not working as intended

1 Answers1