Search the Community

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

Hi all, I have a page with clickable divs built with GSAP in vue.js. Clicking a div triggers a timelineMax animation that moves all three divs, changes their opacity, etc. When clicked, the “BACK” button applies the reverse() method, returning the divs to their original positions and styling. After reversing the animation, I am using the clearProps method to remove any remaining inline styling. As I am new to GSAP, I imagine there is a more elegant way of doing all of this but, it works. The issue arises when the user goes through this process again. When the divs are reset and user clicks one of them, the initial animation works but the reverse animation is very wonky. It seems to jump immediately to the beginning of the timeline, while simultaneously trying to reverse. It’s difficult to figure out exactly what’s happening because the debugger won’t step through the reversing timeline. Any advice would be appreciated. Thanks.

I have a project that I am building and unbuilding cards to a screen based on User feedback. My goal is: animate in the cards (TimeLine.staggerFrom) user chooses new set animate out the cards (using Reverse) onReverseComplete (load the new set of cards) Empty the container of cards Append the new HTML Animate in the new cards But the issue is my reverse complete is firing before the timeline is complete... I am guessing it is happening when a child card completes, I would like it to happen when the whole timeline reverse complete

Hey! I'm working on a time visualizer that uses a set of rings to indicate different time increments. There's still a lot of work to do, but I hit a snag I can't figure out. If you look at the codepen, you'll see the animation is looping pretty well in the forward direction (just a small glitch) but if you click anywhere, the animation will reverse, then eventually stop. I can't figure out how to keep it going. As suggested in other threads, I'm using the onReverseComplete to restart the animation, but the function never gets called. I also changed my 0 second animations to 0.0001 seconds with no luck. Any insights would be greatly appreciated. Thanks!