Duke3D

My initial sense was that the issue was in the post-load rendering since the paths appear to be painted sequentially, as opposed to just getting the file loaded so the event listener ought to be triggered by render complete instead of load complete. The delay until the alert you added appears makes me think the SVG paths start to be rendered before the SVG load is complete - something I didn't expect. Thanks for the code and the off-topic coaching, I'll give it a try. /Duke

I'm working on a complex animation that is working well. My Javascript foo is weak. I am aware of how to delay launch of an animation until either page complete or by setting a fixed delay. The issue I have is that there is a very sizable non-animated traced photo that makes the SVG large and slow to both download and to paint. Is there a JS method to determine when the painting of the complex image is complete in order to trigger or unpause a subsequent animation? Without a delay, at least as viewed on CodePen, the animation launches while the painting is still in progress. The image is in a named illustrator group. The group to watch is id="BillVector" Option 1) To not display the image group until the painting is complete then quickly fade up to prevent a FOUC. Option 2) Place a lower fidelity image in the animated SVG container so it can run as expected, then lazy load and substitute the higher resolution version once it is complete. I presume I can address a group within an SVG using get element by ID and replace the inner html to keep the hi-res paths at the same Z-level as the placeholder low-res paths. Or load the hires under the low-res and display:none the low-res when the hires load and paint is complete. Again this approach needs a trigger for when the SVG render is complete and I'm not sure how to set that up / where to read about it. Thank you in advance for some slightly off-topic but related JS coaching.