GSAP Animation gets crazy on api call and change path

[Guest]

Hello, I have two "little" problems with my GSAP animation. Library works well in most cases but...
First animation problem is when I click my navbar link that scrolls page to id like you know href='#plans', it's just slow repeating timeline entries, like one first fromTo plays 50% then restarts and plays well, okay that's not a big problem, I just disabled whole animation on scroll, but... 

The second problem is much bigger. My animation is a bit long and when I call my api to fetch pricing and plans it becomes completely crazy, everything is jumping, playing, restarting, stopping, disappearing, appearing, reverting etc. and I don't know what I could do to fix it. I use GSAP with NextJS and I thought it's about the SSR, but on build it works the same way. Unluckily I can't share the link to display how it works...

[Guest]

Oh I'm dumb af, when moving whole animation to separated file I forgot about adding empty dependency array ([]) at the end of my useEffect, sorry

[Cassie]

Ha, glad you got it sorted!

 

[Dominic97]

I'm having same issue but your method doesn't work for me. I'm trying the horizontal scroll animation on my landing page and it works for a bit but whenever a section(not in the animation) that uses an api call loads it disrupts the animation. Can you help please?

[GSAP Helper]

@Dominic97It'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.