如何解决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,但我不知道这是否会影响它。
解决方法
为了同时使用 Locomotive Scroll 和 ScrollTrigger,您需要设置一个 .scrollerProxy()
并将其作为 the documentation 封面连接起来。甚至还有 an example demo 展示了如何使用 Locomotive Scroll 做到这一点。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。