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.