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

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); });

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); });