How to get a non-looping value from ScrollTrigger onUpdate when you reach a section.

[jjmolnar 1 Likes (Newbie)]

Hey guys, i m trying to get non-looping value from scrolltrigger update function. The issue i have in the codepen is that it gets me the value every single scrolled pixel. Is there a way how to tell scrollTrigger to return the value only once? Like - ok you reached the section, i ll print your value once (f.e. "1") and then i stop updating until i reach other section i need value from.

 

Any advice is much appreciated!

See the Pen wvEpMEr by Buzzworthy (@Buzzworthy) on CodePen

[elegantseagulls 1,443 Likes (Superhero)]

Does onEnter instead of onUpdate work?
 

onEnter: check,
onEnterBack: check,  

onToggle could also be useful, depending on your use.

 

onToggle: (self) => {
  self.isActive ? console.log(self.trigger.dataset.id) : null;
},

More info on the callbacks here: https://greensock.com/docs/v3/Plugins/ScrollTrigger

[jjmolnar 1 Likes (Newbie)]

Thx for the response. I am sorry, I didn t specifiy my issue more thoroughly. What you ve provided works just great for this case, thank you.

 

But imagine we use horizontal scroll with many boxes on the far right (out of the visible window) and you want to detect when the next box is in the view. I m using onUpdate to check the position of the boxes and it can now work with onEnter as far as i know. And onUpdate, of course checks every pixel meaning i ll get that ID xxx times. I need to print the ID only once when the new box is in the view. Any idea @elegantseagulls ?

 

[Rodrigo 5,407 Likes (Superhero)]

Hi,

 

You should take a look at ScrollTrigger's Container Animation, here is an example:

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[jjmolnar 1 Likes (Newbie)]

I missed this one feature. Thank you Rodrigo!!!