wait for SVG to display before animating

[geedix]

I build a lot of long timeline SVG animations, like this one from last month, for example: 
https://www.pwc.com/us/en/industries/consumer-markets/library/2023-holiday-outlook-trends.html

There's often an unpredictable delay (2 or 3 seconds) before my animation appears. Meanwhile, it's playing while hidden. I've tried adding a listener for the window "load" event before playing, but there seems to be other business happening between the load and display... Vue and Adobe AEM and who knows what else on the server side. Probably not a GSAP problem, but I wonder what else I can do to ensure that my timeline waits until it's visible before playing? Any advice? thanks

See the Pen by (@) on CodePen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - we can't really troubleshoot a live site like that because there are way too many factors. 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 Stackblitz that demonstrates the issue? 

 

And are you absolutely sure that everything is totally loaded before you execute any of the GSAP animations? It sure sounds like an issue where you just need to set up the proper listener or something. 

 

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

 

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. 

[geedix]

Thanks for the reply, GSAP Helper. I may not have phrased my question well, and this forum is probably the wrong place for it anyway since I don't think it's really a gsap problem. My animation always plays correctly locally, and I'm sure it would play fine on codePen until I added all the server junk like Vue, AEM, jQuery, Angular, FBevents etc . I guess I was hoping for something like, "just listen for the first contentfulPaint event instead of the load event" but I don't think there is such an event. It must be a problem that others smarter than myself have encountered: how to make sure the SVG is being displayed before starting the animation? 

For now, I've added a slight delay between the load event and the timeline play command, as a compromise. 

[geedix]

I'm looking into the PerformancePaintTiming API to see whether I can detect when the SVG is actually visible, and start my animation then. I'll let you know how it goes.