Timeline Occasionally Skipping Steps - Dynamic Content Issue with WordPress

[Nikos Xenakis]

Hi everyone,

I'm facing an issue occasionally, and it's a bit challenging to reproduce reliably in a CodePen due to the complexity of my setup.

 

The issue occurs with dynamic content. Sometimes a part of a GSAP timeline is skipped. Specifically, I notice that the fromTo animations are occasionally stuck in the "to" state, while the rest of the timeline continues as expected. There’s no warning in the console from GSAP, and there are no errors about missing elements.

The strange thing is that this mostly happens with WordPress menu items that come in dynamically, which leads me to suspect a timing issue with when the elements are loaded. I tried logging the elements to the console before creating the timeline, and they were all present as a NodeList. Yet, the issue persists. As I mentioned, sometimes it works perfectly fine.

 

I managed to solve this with a slight artificial delay using setTimeout, which seems to allow the timeline to work every time. Interestingly, using GSAP's delay property didn't make a difference. However, using setTimeout feels hacky and unreliable, and I'm hoping there’s a better, more elegant solution.

 

• Setup: WordPress website
• JavaScript: ES6 Modules (using imports/exports)
• Build Tool: Webpack

 

Has anyone faced similar issues with dynamic content in timelines, especially with WordPress or other dynamically generated content? Are there any best practices in GSAP for handling timing issues with dynamic elements, especially without resorting to setTimeout hacks?

I believe this is a broader topic, as I've noticed the same problem in other projects as well. Any advice or insights are greatly appreciated.

 

Thanks in advance!

[mvaneijgen]

2 hours ago, Nikos Xenakis said:

I tried logging the elements to the console before creating the timeline, and they were all present as a NodeList

But are the styles also already present at that moment? And or are there CSS transitions/animations applied to those elements?

 

Without a minimal demo there isn't much else we can do, we would just be guessing blindly. Creating a minimal demo would at least insure that GSAP isn't causing the issue. Personally I always start with all my animations on a place like Codepen, just to test my animation in its basic form with pure HTML, CSS and JS to make sure my animation is working as expected and not my framework or in this case platform is trowing errors. This also makes it really easy to debug, because you have a known working version and next to that you can easily share a version on places like this to ask for feedback when you get stuck.

 

Hope it helps and happy tweening!