I am using the GSAP animation library for adding scroll animation to the website, and for that, I have a custom Callback onEnter:() (at the bottom of the page on the green box "C" {for that please check the code}) 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 has to run a single time.
I tried to find the answer to this question all over the internet even on the GSAP forums but didn't get any idea So can anyone please tell me how I can do that?
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>
I got it! how to do this I just have to add the once: true property in the Scroll trigger Object and it will gonna run only once even after I Scroll multiple times in the viewport