jacobprall

Thanks! This was exactly what I needed. Thanks for the help

Here is a link to a Stackblitz Demo

Hi, I am trying to recreate the animation shown in the first video. It's similar to a progress animation, that moves on to the next item in the list once it is done. One requirement is that users can click on any of the items and that item should become the newly animated item, and the animation should progress to the next one. However, I run into issues as shown in the second video where the animation breaks when I select another item. Here's my code. Basically, I'm using React state to keep track of the current item being animated and also using that index to display the corresponding text. Can someone help point out what I'm doing wrong, and how to fix it such that when I click on an item, any existing progress animation ends and the clicked item begins its own animation, and moves to the next item? first.mov second.mov const [currentQuote, setCurrentQuote] = React.useState(0); function handleSetQuote(index: number) { setCurrentQuote(index); } React.useEffect(() => { timeline({ scrollTrigger: { trigger: '#desktopQuotes', start: '30% 50%', end: '50% 50%', toggleActions: 'play none none none', }, }).fromTo( '#progress', { width: 0 }, { width: '100%', duration: 4, onInterrupt: () => { setCurrentQuote(currentQuote); }, onComplete: () => { if (currentQuote === quotes.length - 1) { setCurrentQuote(0); } else { setCurrentQuote(currentQuote + 1); } }, }, ); }, [currentQuote]); // Relevant JSX <div> <div className="md:w-[226px] xl:w-[306px]"> // quotes is an array of quotes with an Image and quote {quotes.map(({ Image }, index) => ( <button id={`${index}-${121}`} className={`flex flex-col w-full ${ index === currentQuote ? 'opacity-100' : 'opacity-50' }`} onClick={() => handleSetQuote(index)} > <Image fill={currentQuote === index ? 'white' : 'gray'} className="my-9 self-center" /> <div className="h-[1px] bg-ts-black700 relative w-full"> <div className={`h-[2px] bg-electricYellow absolute ${ currentQuote === index ? 'block' : 'hidden' }`} id="progress" /> </div> </button> ))} </div> <div id="desktopQuotesText" className="xl:col-span-2"> <QuotesComponent /> <p className="md:text-2xl xl:text-[44px] xl:leading-[55px] text-white font-PP-Mori my-12"> {quotes[currentQuote].quote} </p> <Paragraph className="text-ts-black300 text-base"> Solomon Grandy </Paragraph> <Paragraph className="text-ts-black300 text-base"> Twitter CEO </Paragraph> </div> </div>