Scrolltrigger fire off toggleActions when item nears top of the page while animated

[Tuna]

Hi there, I am a total newbie when it comes to ScrollTrigger. I have several overflow: hidden sections on a page that have a left and right side. My scrolltrigger pins parent container while the right side is animated with gsap.to , and then the whole container gets unpinned once the right side reaches the end. I was able to accomplish that part thanks to this forum.

 

However, I am stuck on what I want to accomplish next. Within the right side, there are several divs with varying lengths.  I want to fire off a console.log message onEnter() when each item reaches 100px to the top of the scrollbar and a onLeave() when the bottom of each item reaches the top of the scrollbar.

 

How would I achieve this? Any help would be greatly appreciated! Thank you so much

See the Pen ZEPpVOK by nyanmar (@nyanmar) on CodePen

[GreenSock]

Welcome to the forums, @Tuna

 

What you're asking for requires custom logic that's beyond the scope of help we can provide in these forums, but the basic idea would be:

1. Create a timeline and attach your ScrollTrigger to that (instead of the simple tween you've got). Put the tween into that timeline, and give it a duration of 1 to make it easy.
2. Calculate the total amount you're moving things (the y that you've already got in your demo). 
3. Based on each element's distance from the top of their containing element (the one getting pinned), calculate the proportion of the y movement that it represents. Use that to place a callback on the timeline. For example, if it's 20% of the total y movement, you'd do: 

   tl.add(() => {
     if (tl.scrollTrigger.direction > 0) {
       console.log("onEnter");
     } else {
       console.log("onLeaveBack");
     }
   }, 0.2) // <-- position parameter, insert at 0.2 because the whole tween is 1

    

4. Check the direction of the timeline's scrollTrigger to determine if it's an onEnter or onLeaveBack and code it accordingly. 

That's the general idea off the top of my head. 

 

Good luck!

[Tuna]

@GreenSock Thank you so much!! I couldn't get add() to fire in the right place even when I specify the position param (it kept on firing on window load, even when I'm not on the ScrollTrigger yet?).  I must be placing it in the wrong place - but I was able to on use onUpdate() to 'watch' the animation and fire off what I need. Thanks again!

[GreenSock]

16 minutes ago, Tuna said:

I couldn't get add() to fire in the right place even when I specify the position param (it kept on firing on window load, even when I'm not on the ScrollTrigger yet?).  I must be placing it in the wrong place

Something sounds fishy there - we'd need to see a minimal demo that illustrates the issue in order to troubleshoot effectively. Feel free to post one if you'd like some help. 

 

Glad you got something working.