floopix

Thank you all for the speedy replies and suggestions, here is a basic demo: https://stackblitz.com/edit/gsap-react-basic-f48716-thcer6?file=src%2FApp.js Each button is related to a slide and my desired effect is for the next slide to fade in while the old slide fades out, but as you can see in the demo, first the new slide fades in then after that timeline has ended the old slide fades out. I am thinking it has something to do with setting the reversed of the two timelines to the opposite of one another but I am not completely sure.

Hello, I am new to gsap and React so bear with me. I currently have this which maps different timelines to different image slides for an image slider and I want the new slide to fade in while the old slide fades out at the same time. For some reason the timelines play one after the other so a fade out then a fade in. I am stuck because I am not sure what is causing them not to play in sync. Thank you for your time. useLayoutEffect(() => { ctx.current = gsap.context((self) => { const slide = gsap.utils.toArray('.slide'); const links = gsap.utils.toArray('.information-holder') const text = links.map((link) => link.querySelector('.header')); const button = links.map((link) => link.querySelector('.link')); anims.current = slide.map((slide,i) => { let tl = gsap.timeline({reversed: i === 0 ? false : true, duration: 1}); tl.to( slide, { opacity: 1, display: 'block', }, 0, ); tl.to( text[i], { opacity: 1, yPercent: 100, display: 'block', }, 0, ); tl.to( button[i], { opacity: 1, yPercent: 100, display: 'block', }, 0, ); return tl; }); }, slidesRef); return () => ctx.current.revert(); }, []); const clickFunction = (index) => { changeButton(index); anims.current[currentIndex.current].reversed(true); anims.current[index].reversed(false); currentIndex.current = index; }; Here is a demo: https://stackblitz.com/edit/gsap-react-basic-f48716-thcer6?file=src%2FApp.js