问题描述
我正在尝试一个简单的 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,但我不知道这是否会影响它。
解决方法
为了同时使用 Locomotive Scroll 和 ScrollTrigger,您需要设置一个 .scrollerProxy()
并将其作为 the documentation 封面连接起来。甚至还有 an example demo 展示了如何使用 Locomotive Scroll 做到这一点。