How to access scroll position when using ScrollSmoother

[Levin Riegner]

I need to access the scroll position.

 

I have a function that looks to when the user scrolls 100px then fires a function, and the same on scroll back up. However ofcourse window doesnt work.

 

How do you access this in ScrollSMoother?

Heres my current code, that doesnt work.

 

// NOTE Before render, calculate smooth scrolling
useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    smoother.current = ScrollSmoother.create({
      smooth: 2, // seconds it takes to "catch up" to native scroll position
      effects: true, // look for data-speed and data-lag attributes on elements and animate accordingly
      onUpdate: update
    });
  }, main);

  return () => ctx.revert();
}, []);

const update = () => {
  // Get scrollY position
  const scrollY = smoother.current.scroll.y; // Scroll doesnt exist
  console.log(scrollY);
};

 

[Levin Riegner]

Fixed!

I needed to do this instead:
 

// NOTE Before render, calculate smooth scrolling
useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    smoother.current = ScrollSmoother.create({
      smooth: 2, // seconds it takes to "catch up" to native scroll position
      effects: true, // look for data-speed and data-lag attributes on elements and animate accordingly
      onUpdate: (self) => {
        let scrollY = self.scrollTop();

        console.log(scrollY);
      }
    });
  }, main);

  return () => ctx.revert();
}, []);

 

[Levin Riegner]

I just need to figure out how to send this to another component now...

[Cassie]

Maybe our React guide may be of help?