I’m using react JS and GSAP animation.

I need to render child GSAP animation on page load.

I have item.cards array. Item is populated in the parent and child components. I’m looping item.cards

useGSAP(
      () => {
        gsap.from('.cards', {x:-50, stagger:.3, ease:'power', opacity:0})
      },{scope: container}
  );

<div className="flex overflow-x-auto w-auto h-auto flex-row" ref={container}>
 {
   item?.seasons?.map((item, id) => {
      return (
             <div key={id} className="relative cards mx-3" >
                <p className="absolute">{item.name}</p>
        <img className=" w-96 z-0" src={process.env.REACT_APP_IMAGE_URL + item.poster_path}></img>
             </div>
      )
   })
 }
</div>

When the page loads the child animation is not working. However, if I make changes and save the project, I can see the animation happening in the child cards.

It looks like some rendering issue.

Thanks in advance.