GSAP Not working in ScrollControls Html

[pradeepselva204]

GSAP Not working in ScrollControls Html.

[clementroche]

Can you provide an example using codesandbox ? I think you need to use https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

[IhsenBen]

I second this, gsap scrollTrigger is unable to read the HTML in the <Scroll html>, classes, ids or refs.

[AxiomeCG]

I found a workaround to bind the Scrolltrigger to the ScrollControls. You need to pass the fixed.parentElement to the Scrolltrigger as a scroller. GSAP ScrollTrigger.scroller

fixed is the sticky div, and its parent has the overflow auto.

  const {fixed} = useScroll();

  useGSAP(() => {
    const boxes = gsap.utils.toArray('.box') as HTMLElement[];
    boxes.forEach(box => {
      gsap.to(box, {
        x: 300,
        rotation: 360,
        scrollTrigger: {
          trigger: box,
          scrub: true,
          scroller: fixed.parentElement,
        }
      })
    });
  }, );

Demo: https://r3f-scrolltrigger-scrollcontrols.vercel.app/ Full Test Repo: https://github.com/AxiomeCG/r3f-scrolltrigger-scrollcontrols