[gsap + react , how to prevent first img render]

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,
    }
  );
}, [])

 

[How to skip part of a timeline if element does not exist ?]

I have found a solution, i though i had to chain everything all at once on the timeline
But this actually works :
 

cards.map((card, index) => {

tl.current = gsap

.timeline()

.delay(index + 1.5)

.fromTo(card, { opacity: 0 }, { opacity: 1 })

.fromTo(dots[index], { opacity: 0 }, { opacity: 1 }, "<");

index != cards.length - 1 &&

tl.current.fromTo(line[index], { width: 0 }, { width: "100%" });

tl.current.timeScale(1.25);

});

[How to skip part of a timeline if element does not exist ?]

Hello everyone !
I'm new to GSAP and just started using it in a React project.

I'm mapping an array of elements and apply timelines to each one so they play in sequence.

Basically what i want is to skip the last .fromTo(line[index], {width: 0}, {width: "100%}) when (index == cards.lenght -1) since that last element does not exists and i get a "GSAP target not found error"

I know i could use an if/else statement and copy the timeline minus this line, it works, but this is not a very elegant solution and forces to apply changes in both if i were to tweak the animation
Is there a clean way to do this ?

Thanks !

Here is my code : 
 

cards.map((card, index) => {

tl.current = gsap

.timeline()

.delay(index + 1.5)

.fromTo(card, { opacity: 0 }, { opacity: 1 })

.fromTo(dots[index], { opacity: 0 }, { opacity: 1 }, "<")

.fromTo(line[index], { width: 0 }, { width: "100%" })

.timeScale(1.25);

});