Блог

Главная - Вопросы по программированию - GSAP ScrollTrigger работает не так, как предполагалось

GSAP ScrollTrigger работает не так, как предполагалось

#javascript #gsap #scrolltrigger #locomotive-scroll

#javascript #gsap #scrolltrigger #локомотив-прокрутка

Вопрос:

Я пытаюсь использовать простую анимацию 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() и подключить все, как описано в документации. Есть даже демонстрационный пример, который показывает, как это сделать с помощью Locomotive Scroll.

Метки: