useLayoutEffect(() => {
const animationContext = gsap.context(() => {
const timeline = gsap.timeline();
const timelineButtonOff = gsap.timeline();
timeline.to(".landingOverlay", {
opacity: 1,
zIndex: 1,
duration: 0.1,
paused: isButtonClicked,
ease: "none"
});
timeline.to(marqueeDummy, {
duration: 0.3,
opacity: 0.4,
});
const loopDummy = horizontalLoop(marqueeDummy, {
repeat: -1,
speed: 0.3,
reversed: true
});
const loop = horizontalLoop(marquee, {
repeat: -1,
speed: 0.3
});
timeline.add(loopDummy, 0.1);
timeline.add(loop, 0);
timelineButtonOff.to(".menuCarousel", {
x: '-' + distance,
ease: "none",
scrollTrigger: {
trigger: ".landingScreen",
toggleActions: "restart pause reverse reset",
start: "center 45%",
end: "+=3000",
scrub: 0.1,
pin: true,
pinSpacing: true,
},
onReverseComplete: () => {
setIsButtonClicked(false);
timeline.play();
console.log('timeline has restarted');
}
});
if (!isButtonClicked) {
timeline.play();
} else {
timeline.kill();
timelineButtonOff.play();
}
});
return () => {
animationContext.revert();
};
}, [isButtonClicked]);
<div className='landingOverlay position-absolute' onWheel={handleButtonClick}>
{/* landingOverlay content */}
<button className='d-block rippleButton' onClick={handleButtonClick}><FaAngleDown /></button>
</div>
<div ref={landingScreenRef} className="landingScreen">
<div className={`marquee position-relative ${isButtonClicked ? '' : 'rotatedContainer'}`}>
<div className="dummyCarousel d-flex flex-row">
{/* dummyCarousel content */}
</div>
<div className='my-4'>
<div className='d-flex flex-row menuCarousel position-relative'>
{/* menuCarousel content */}
</div>
</div>
<div className='dummyCarousel d-flex flex-row'>
{/* dummyCarousel content */}
</div>
</div>
</div>
I am trying to implement a marquee-like animation effect for a menu carousel on the landing screen. The isButtonClicked state changes from false to true when you do handleButtonClick and to false when you reverseCallback. When I reverseCallBack, the state of menuCarousel changes to original but not that of dummyCarousel. What am I doing wrong?
Edit 1: I figured that the problem is in using reversed: true for the handleLoop function