Jump to content
Search Community

Reset progress animations onClick

jacobprall test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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?

 

 

 

 

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>

 

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

  • Solution

Ah, it looks like you weren't doing proper cleanup, so you were creating conflicting/competing tweens. I'm not sure what you were trying to do with the ScrollTrigger stuff there, but it's not doing anything because you didn't import or register ScrollTrigger. 

 

Here's a simplified version: 

https://stackblitz.com/edit/gsap-react-basic-f48716-qu9ztt?file=src%2FApp.js

 

I'd strongly recommend reading this article:

 

 

gsap.context() is your new best friend in React. It makes cleanup super easy, plus selector scoping is very convenient. 

 

I hope that helps. 

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...