Scoped Selectors

When we pass in a Ref as the scope, all selector text (like ".my-class") used in GSAP-related code inside the useGSAP() hook will be scoped accordingly, meaning your selector text will only select descendants of the container Ref. No need to create a Ref for every element!

// we only need one ref, the container. Use selector text for the rest (scoped to only find descendants of container).
const container = useRef();

useGSAP(() => {
    gsap.from(".box", {opacity: 0, stagger: 0.1});
}, { scope: container }) // <-- scope

return (
  <div ref={container}>
      <div className="box"></div>
      <div className="box"></div>
      <div className="box"></div>
  </div>
);