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