如何使回调只运行一次滚动触发 GSAP？

Question

我正在使用 GSAP animation 库将滚动 animation 添加到网站，为此，我有一个自定义回调onEnter:() （在页面底部的绿色框“C”{为此请检查代码} ) it runs the function and shows the message in the console once it enters the viewport but if I again go up and scroll down this functions runs again I want this function to run only once in spite the user is scrolling up and down many times it必须运行一次。

我试图在整个互联网上甚至在 GSAP 论坛上找到这个问题的答案，但没有得到任何想法所以谁能告诉我我该怎么做？

 gsap.registerPlugin(ScrollTrigger); gsap.to(".c",{ scrollTrigger:{ trigger:".c", onEnter:test, start:"top center", markers:true, }, x:400, rotation:300, immediateRender: true, duration:3 }) function test(){ console.log("I am entered") }

 .sc-div{ height:100px; width:100px; display: flex; align-items:center; justify-content:center; }.a{ background:red; margin-top:50px; }.b{ background: yellow; }.c{ background: green; margin-bottom: 400px; }.mt{ margin-top:500px }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <div class="a sc-div">A</div> <div class="b sc-div mt">B</div> <div class="c sc-div mt">C</div>

Answer 1

我知道该怎么做我只需要在滚动触发器 Object 中添加once: true属性，即使在视口中滚动多次后它也只会运行一次