Animations not working after integrating API

[Sabz]

Hello everyone, I'm using GSAP with my Next js project. But after adding API the GSAP animations are not working. For example, I have a single post page. The contents of that page are coming from an API. I've some heading animations. But those are not working. I also tried to add a preloader to render those contents conditionally. That's also not working.

 

Note: I'm using SWR for fetching data.

[Rodrigo]

Hi,

 

Without a minimal demo there is not a lot we can do unfortunately. We also understand that creating a minimal demo while working with APIs can be challenging and hard to re-create. Maybe create a minimal demo using a timeout to simulate the data fetch (just remember to keep the demo as small as possible, just something that clearly illustrates the problem you're having, no need for your entire project.

 

Finally we recently launched our useGSAP hook that simplifies the way you can integrate GSAP in React environments, be sure to check the docs and our learning resources:
https://gsap.com/resources/React

 

Also we have a series of starter templates in Stackblitz using GSAP with Next, you can fork one of those:

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

Although this is the most basic one

https://stackblitz.com/edit/stackblitz-starters-3zkguu

 

Hopefully this helps.

Happy Tweening!