Scrub not working in React

[andoivrjrev]

I have implemented a horizontal scroll for my React App (next.js). 

Works all fine, but the scroll is not catching smooth of with scrub, instead it is instand like a "normal" scroll.

This is the crucial part of my app, where the scroll happens:

 

  const scrollTriggerRef = useRef(null);
  useLayoutEffect(() => {
    if (!horizontalScroll) return;

    let ctx = gsap.context(() => {
      gsap.registerPlugin(ScrollTrigger);
      const scrollTimeline = gsap.timeline({
        scrollTrigger: {
          trigger: scrollTriggerRef.current,
          start: "top top",
          end: "+=9000px",
          scrub: 2,
        },
      });
      scrollTimeline.to(scrollContainerRef.current, {
        x: -scrollContainerRef.current.scrollWidth,
      });
    }, scrollTriggerRef);
    return () => ctx.revert();
  }, []);

If nobody knows the answer right on point, I will provide a minimum demo :).

Thanks guys!

[Cassie]

That's the right scrub syntax. It's important to specify a linear ease though.

Maybe try this and see how it looks? If it's not working pop us a minimal demo, thanks.
 

gsap.to(scrollContainerRef.current, {
  x: -scrollContainerRef.current.scrollWidth,
  ease: "none" // important,
  scrollTrigger: {
    trigger: scrollTriggerRef.current,
    start: "top top",
    end: "+=9000px",
    scrub: 2,
  },
});