reactjsanimationgsap

GSAP target not found in react


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]);

Solution

  • you can use useGSAP, and scope the ref

    const refContent = useRef(null);
    useGSAP(
        () => {
          if (!refContent.current) return;
          
            gsap.set('.dots', {
                visibility: 'hidden',
                opacity: 0,
            });
    
            gsap.to('.dots', {
                visibility: 'visible',
                stagger: 0.1,
                opacity: 1,
            });
        },
        {
            scope: refContent,
            dependencies: [videos],
        }
    );
    return (
        <div className="content" ref={refContent}>
            {videos.map((_, i) => (
                <span className="dots" key={i}>
                    <span className="progress" />
                </span>
            ))}
        </div>
    );