gsap + react , how to prevent first img render

[aledoro]

Hello

Noob question =>

I'm animating images on a home page and before animation plays there is a first render which flashes once then animate properly
I saw the recommendations to use useLayoutEffect but it hasnt solved my problem

What else would you recommand trying? 
Cheers !

This is the code i use :
 

useLayoutEffect(() => {
gsap.fromTo(
    el.current,
    { x: index % 2 == 0 ? "-50%" : "50%", y: "25%", opacity: 0 },
    {
      scrollTrigger: {
        trigger: el.current,
      },
      duration: small ? 1.5 : 1,
      ease: "circ.out",
      x: 0,
      y: 0,
      opacity: 1,
    }
  );
}, [])

 

[Cassie]

 

This article will help! Good luck.