React animating elements with GSAP rendered via

  Kiến thức lập trình

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={} style={style} ref={gameRef}>
      {field.flat().map((isRotated, key) => (

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?

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website