Detect scrolling within pinned area

[mindfailure]

How can I trigger a function if a user scrolls more than 50px within a pinned area?

 

Example code for the pinned area:

 

I assume that this would be achieved using onEnter and a function

  gsap.to(container, {
    scrollTrigger: {
      trigger: container,
      pin: true,
      onEnter: () => {
        /**
         * If scroll more than say 50px
         * trigger hpNext();
         */

      },
    },
  });

Thanks

 

 

[OSUblake]

Hi mindfailure,

 

You could use a nested element inside of the container and create another ScrollTrigger to make your call.

 

Or you can just check to see how far it's scrolled in onUpdate.

 

onUpdate(self) {
  console.log(self.scroll() - self.start)
}