Function Launches before reaching the viewport when passing Arguments?

my question was closed because many people think it is associated with this question Why is the method executed immediately when I use setTimeout? I read all the answers but it doesn’t work for me and second, the question doesn’t contain any explanation to the question I asked: “why it’s not working when I am passing arguments? so can you guys please look thoroughly and lemme know”

Any help is highly appreciated 🙂

Again I am creating a scroll-based Typing effect using GSAP (Scroll trigger Plugin) and Typed Js (For typing effect) the thing is that the code works as desired when the function is directly attached to the OnEnter Property but when I pass class names as arguments in the external function the function gets launched (check Console by uncommenting the code) once the page reloads and doesn’t respond to the OnEnter property.

Can anyone tell me why it’s not working when I am passing arguments?

// FUNCTION IN ONENTER PROPERTY

// ****** It Works (responds to scroll) when I write the function directly in onEnter Property 

gsap.to(".git-go-method-render",{
    scrollTrigger:{
        trigger:".git-go-method-render",
        start:"-200 center",
        once:true,
        markers:true,
        onEnter:function write(){
            new Typed('.git-go-method-render',{
            stringsElement: '.git-go-method-head',
            typeSpeed:50,
            cursorChar: "_",
            loop:false,
            onComplete: function(self) { self.cursor.remove() }

            })
        }
    }
})



// PASSING ARGUMENTS

// Here I am poassing the arguments in the hello function attached to the OnEnter Property but  it doesn't responds to the viewport and fires the function once the page is load 


// gsap.to(".git-go-method-render",{
//     scrollTrigger:{
//         trigger:".git-go-method-render",
//         start:"-200 center",
//         once:true,
//         markers:true,
//         onEnter:hello(".git-go-method-render",".git-go-method-head")
//     }
// })


// function hello(render,holder){
//     return new Typed(render,{
//     stringsElement: holder,
//     typeSpeed:30,
//     cursorChar: "_",
//     loop:false,
//     onComplete: function(self) { 
//         self.cursor.remove() 
//         console.log("function is launched")
//     }
    
// })   
// }

h1{
  font-size:10rem;
  text-align:center;
}

.spacer{
  width: 100%;
  height: 400px;
}
h2{
  font-size:4rem;
  font-family:arial;
  text-align:center;
  margin-bottom: 500px;
}

<!-- Typed JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

<!-------- GSAP Animation CDN Links ------>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>


<h1>Scroll</h1>

  <div class="spacer"></div>

<div class="git-go-method-head">
  <p>Hello! How are you?</p>
</div>


<h2>
  <span class="git-go-method-render"></span>
</h2>

Answer

It’s because you are passing return value of function hello in onEnter callback.

You can use bind to bind argument to callback function

gsap.to(".git-go-method-render", {
scrollTrigger: {
    trigger: ".git-go-method-render",
    start: "-200 center",
    once: true,
    markers: true,
    onEnter: hello.bind(null, ".git-go-method-render", ".git-go-method-head"),
},
});

Advertisement

Answer