Archived topic
Animation issues occur in the header
5 replies · Started by Laura on February 21, 2023
Hi
I have an svg logo for my site i want to animate, im using the svg support plugin to add to site, and make it inline svg.
If i place the svg inside a custom html block it the animation runs on page load, that can be through page editor or using a block hook with the after_logo, and it works fine.
If i add it to the logo through customiser or a merge header element , it wont run on page load, but if i call the function in the console of page inspector it triggers the animation. Thats the same with generate blocks image block and wordpress image block.
The animation lobrary is loaded with an element in the header, and the code that makes th animation is in the footer through element or child theme and it makes no difference.
any thoughs as to why this may be
Thanks
Laura
Hi Laura,
It depends on how the animation is being called.
Does it target the SVG by its class or ID? or something else?
Hi Ying
it's a time line and targets #id path on one part, and a class on a differant part of the time line.
I have now removed all the keyframes so its as simple an animation as possible and have taken the following steps
1) I and have only targeted the svg html tag itself
2) I then targeted the .is-logo-image class only
3) I then targeted the path html tag and have the same result.
For each one it is the same reuslt, seems that only custom html blocks works on load and anything wordpress (so logo customiser and both gpblock image and wp image blocks) dont work on load but will if triggered post load in console.
if you can see the link i sent the console function is run();
Thanks
Laura
It seems some classes will be stripped by uploading the SVG to media library, I guess for security purpose.
Can you send me the original SVG code so I can take another look?
Let me know!
Hi Ying
I have added the svg below .
Ive now also tried both .ready and .load functions to the animation to see if it available at the time of the animation call, no change
although with a document.queryselector at the top of the code it says it is available.
Thanks
Laura
Hi there,
the SVG Support plugin is converting the <img> to an inline SVG on the frontend using Javascript. This will happen on DOM load, so the SVGs inline XML won't be there if your code is fired on DOM load as well.
The better option would be to Hook in your inline SVG instead of using the logo. Then theres no need for the plugin to convert it, and the SVGs code will be there from the start.