The community member is experiencing an issue where HTML embeds on a web page are refreshed or reloaded a few milliseconds after the page loads. This causes problems when trying to animate an SVG element within the embed using JavaScript, as the manipulated properties are lost when the embed is refreshed. The community member is looking for a way to trigger a function only after the HTML embeds have finished being refreshed, so they can target the refreshed elements within the embed and manipulate them smoothly.
In the comments, another community member suggests sharing a builder link and published link to test the issue. They also provide a link to the HTML Embed implementation code. Another community member notes that a common mistake is not using the "client-only" setting when manipulating the DOM. The original community member confirms that using the "client-only" setting resolved the issue they were facing.
In this video you can see that when the page loads, the html embeds get refreshed or reloaded a few milliseconds after page load. You can see this from the blue refresh highlight that chrome dev tools shows over the top of the html embed elements that indicates something has changed on that element.
The reason I bring this up is Im having difficulty animating an svg element that i have inside an embed. For clarity in this example, I'm just changing the color to green using js. You can see that the color turns to green as per the js DOM manipulation, but then when the html embed gets reloaded/refreshed, my manipulated properties are gone. Interestingly enough, no further manipulation to the elements will take effect now that this embed refresh behaviour has taken place. If I set a timeout function and set the js to target the elements 2 seconds after page load (after the html embeds have refreshed), I can now freely manipulate the svg. The issue Im facing comes from the fact that the elements I target with js that are within an embed disappear from the DOM and get replaced with new elements during this embed refresh behaviour.
I'm just looking for some info into what this embed refresh behaviour is about. If I could find a way to trigger a function only after the html embeds have finished being refreshed that would be great, that way I can target the refreshed elements within the embed and things would work smoothly. At the moment, I can trigger the functions after the refresh behaviour by using a timeout function to wait 2 seconds (by which time embeds have been refreshed) but that doesn't seem like good practise for production considering different users face different loading times etc.
The embed refresh behaviour occurs only on the live site, manipulating elements inside an embed with js works fine within the canvas editor.
