Tl works twice

[Alina P]

Hi! I have problem. If the function immediately receives action === play, the animation works perfectly. If pause first and then play, then tlClientsTimeline works twice, and only then the callback starts. What is my mistake?

 

What should be: tlClientsTimeline ends, tab switches, tlClientsChat begins. At the first launch, the function works correctly, but if you change the slide and then restart tl, it works twice.

See the Pen MWdyZyb by aodxfaionn (@aodxfaionn) on CodePen

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? You didn't share the other code where the timelines are created, and there may be other things in your code that impacts things. When you only share this small excerpt of the code, it doesn't really allow us to troubleshoot effectively.

 

If you're using React, make sure you're using the useGSAP() hook. See https://gsap.com/react

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

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

[Alina P]

Yes, you right. I did it)

[GreenSock]

Oh, it looks like a logic problem in your code - you're recreating the animations EVERY time animationClients() is called. And you're creating them AFTER you run your pause/play logic. 

 

I assume you meant to create the animations once (outside that function), and then just play/pause them as necessary, rather than creating them over and over again inside that toggling function. 

 

If you still need help, please make sure you only include a minimal demo - your demo had 400+ lines of code. That makes it very cumbersome to troubleshoot and it's beyond the scope of help we can provide here. Just recreate the problem in the simplest form possible. No need to include your real project. Just some simple colored <div> elements is fine. 

[Alina P]

7 minutes ago, GreenSock said:

Oh, it looks like a logic problem in your code - you're recreating the animations EVERY time animationClients() is called. And you're creating them AFTER you run your pause/play logic. 

 

I assume you meant to create the animations once (outside that function), and then just play/pause them as necessary, rather than creating them over and over again inside that toggling function. 

 

If you still need help, please make sure you only include a minimal demo - your demo had 400+ lines of code. That makes it very cumbersome to troubleshoot and it's beyond the scope of help we can provide here. Just recreate the problem in the simplest form possible. No need to include your real project. Just some simple colored <div> elements is fine. 

Yes, it`s true. I fixed my bug. Thanks!