triggering a function with gsap scrolltrigger

[Dylan Bozarth]

Hello, I am using gsap scrollTrigger to control the animations on my webpage. This is working fine but I also would like to be able to call a function when this element is scrolled to. The issue is that the function is being called as soon as the page loads, regardless of scroll position.  I found this related answer here 

So I am using the answer's code to try and solve this issue 

 const test = () => {
    console.log('ssssssssssssssssss')
  }
  ScrollTrigger.create({
    trigger: '#crew',
    onEnter: test(),
    //onLeave: myLeaveFunc,
    //onEnterBack: myEnterFunc,
    //onLeaveBack: myLeaveFunc
  });

However the issue persists. The 'sssssssss' will log as soon as the page loads. 
My page is 4 react components in the following layout 
 

<div id="crew">
          <Crew />
        </div>

I'd really like to be able to call a certain function when the user scrolls to this div. Is there a way I can do that? I have a codesandbox with my full page code available here https://codesandbox.io/s/fancy-darkness-62voz?file=/src/mainpage.js
Thank you in advance for your help. 

[GreenSock]

That sounds like just a JavaScript thing - when you have "()" after your function name, it invokes the function

 

// BAD
onEnter: test() // <-- INVOKES and the returned value is assigned on onEnter

// GOOD
onEnter: test

In other words, just pass a reference to the function. Don't invoke it. 

 

Does that help?

[Dylan Bozarth]

8 hours ago, GreenSock said:

That sounds like just a JavaScript thing - when you have "()" after your function name, it invokes the function

 

// BAD
onEnter: test() // <-- INVOKES and the returned value is assigned on onEnter

// GOOD
onEnter: test

In other words, just pass a reference to the function. Don't invoke it. 

 

Does that help?

That does help! thanks for that seems to have been the problem. It is working how I intended but I do not really understand why. 
I wrote this code to test it out, and it works for when I scroll past that component the function is invoked, however I removed the className of "crewTrigger" from my div and it is still working, there is no class of crewTrigger and it is still recognizing it. I have my full page here if you'd like to take a look https://github.com/Imstupidpleasehelp/Curb-Appeal/blob/main/src/pages/crew.js

<div >
          <Crew />
        </div>

ScrollTrigger.create({

    trigger: '.crewTrigger',

    onEnter: test,

    //onLeave: myLeaveFunc,

    //onEnterBack: myEnterFunc,

    //onLeaveBack: myLeaveFunc

  });

 

[GreenSock]

If the trigger doesn't exist, it'll basically use the entire page, meaning it'd fire as soon as you start scrolling. 

 

If you still need some help, please provide a minimal demo (like in CodePen) - we can't troubleshoot live sites or Github repos (too many factors, too difficult to assess things) 

[Dylan Bozarth]

6 hours ago, GreenSock said:

If the trigger doesn't exist, it'll basically use the entire page, meaning it'd fire as soon as you start scrolling. 

 

If you still need some help, please provide a minimal demo (like in CodePen) - we can't troubleshoot live sites or Github repos (too many factors, too difficult to assess things) 

I took away all of the unnecessary code (for the problem) in my page here. I have it on codesandbox here: https://codesandbox.io/s/wizardly-flower-s4s20?file=/src/mainpage.js
I tried to use codepen but I kept getting syntax errors, even for a simple hello world react component 

I just want a function to trigger the same time as the animation does, I left only 2 components on the page for simplicity. Please let me know if I can do anything else to make myself more clear.

[GreenSock]

I'm a bit confused - everything appears to be working exactly the way it should according to the code. What am I missing? If you want the test() function to fire when the first image of the dog enters the screen, you should use that element as the trigger. Currently, you're setting the trigger to that entire section which includes things higher on the page. 

 

If you still need help, maybe try doing the most basic version in vanilla JS/HTML/CSS instead of using React, just to isolate things further. GSAP works great with React - I'm just saying that whenever you run into trouble like this, it's always best to strip out as many factors/variables as you can. 

[Dylan Bozarth]

1 hour ago, GreenSock said:

 function to fire when the first image of the dog enters the screen, you should use that element as the trigger.

 

Looks like that was the issue. I was targeting the whole page instead of the elements on the page. Now that I'm targeting the first element of the page it is working as intended. Thank you much for your help! 

[GreenSock]

No problem, @Dylan Bozarth. Glad you got it all sorted out.