I have a field of squares. Each square is a react component.
const SquareInit = ({ isRotated, className }: SquareProps) => {
const classes = clsx({
[s.square]: true,
[s.rotated]: isRotated,
[className]: !!className,
});
return <div className={classes} />;
};
export const Square = memo(SquareInit);
Squares are rendered in field component via map function in this way:
<div className={s.game} style={style} ref={gameRef}>
{field.flat().map((isRotated, key) => (
<Square
className="sq"
key={key}
index={key}
isRotated={isRotated}
onClick={handleSquareClick}
/>
))}
</div>
I am trying to animate square with useGSAP in this way
const gameRef = useRef(null);
useGSAP(() => {
gsap.from('.sq', { scale: 0, delay: 2, stagger: {
each: 0.2,
from: 'random',
grid: [squares, squares],
},
});
});
But this animation is not working. I have also tried to find elements via gameRef that is put on squares parent element. I have tried to use gsap.from(‘div’, {…}) and add scope: gameRef to useGSAP hook. But it seems it just does not see child elements via selector, een if I pass className explicitly as string.
Also if I try to use gameRef.current.querySelectorAll('div')
inside useGSAP hook I get empty array.
Looks like code is executed before children render.
Is there any way to animate children from parent element?