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