Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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]);
Tags:

2

Answers


  1. 0

    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]);
    Login or Signup to reply.
  2. 0

    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>
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search