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

[github-actions[bot]]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!

[github-actions[bot]]

We’re closing this issue to keep our project manageable and make room for other active work, but we truly appreciate your effort and contribution.

If you’d like to continue working on this, please feel free to re-open it or reach out on Discord — our community is always ready to support you. Thanks again for helping us stay organized and for understanding our approach!