GSAP target not found in react

Question

So I was trying to animate my span elements with ".dots" selector but I was getting the warning:

So the span represent the number of videos in the control bar.

GSAP target .dots not found. https://gsap.com

for both positions

Initial code:

const setupTimelines = () => {
    gsap.set(".dots", {
      visibility: "hidden",
      opacity: 0,
    });

    gsap.to(".dots", {
      visibility: "visible",
      stagger: 0.1,
      opacity: 1,
    });
}

useGSAP(setupTimelines);

<div className="content">
     {videos.map((_, i) => (
        <span className="dots" key={i}>
           <span className="progress" />
        </span>
      ))}
</div>

changes I tried to make wiht useGSAP and useEffect but it didn't work:

useGSAP(() => {
    if (videos.length > 0) {
      setupTimelines();
    }
  },[videos]);

Answer 1

Might be because it does not find the .dots even videos are loaded. You may try to check if .dots are actually in DOM.

  useEffect(() => {
    if (videos.length > 0) {
      const dots = document.querySelectorAll('.dots');
      if (dots.length > 0) {
        setupTimelines(); 
      }
    }
  }, [videos]);