Animation works on some URLs, but not others?

[ro-achterberg 3 Likes (Newbie)]

I have some SVG that resides directly inside my HTML (no object/img are used). I use jQuery and GSAP for the animation, which works fine.

 

That is, until I load the animation from a URL different from the site root URL. In which case only part of the animation works (??).

 

Works: http://www.brigaid.nl/staging/grahamskitchen/

Does not work: Works: http://www.brigaid.nl/staging/grahamskitchen/menu-wijn/

(Latest Chrome, Firefox)

 

I'm sorry I can't be more elaborate about this, because it has me completely stumped. It almost seems like a 'same origin' issue, but I really can't see how that is the case. The SVG is directly embedded and everything is loaded from the same base URL from a remote web server.

 

Please note that I cannot create a pen for this, because the problem seems to be directly related to this specific setup.

 

Hoping for some bright insights!

[retropunk 126 Likes (Specialist)]

hmm, neither of the links load for me in Chrome on Mac.

I am attaching the console errors.

 

 

[Carl 9,066 Likes (Superhero)]

these are the errors I am seeing 

 

http://www.brigaid.n...chen/menu-wijn/

 

 

It is very difficult to try to look at the full source code for an entire site and try to figure out what might be wrong. It would be much better if you just made a simple page with only the SVG and a single TweenMax tween just so the issue is as isolated as possible.

[Jonathan 5,176 Likes (Superhero)]

When i go to both links from above i get this error in the console in latest Firefox

not well-formed
08:28:09.222 not well-formed1 <unknown>:1:153

If your using JSON make sure to set the proper MIME type

application/json

Or you can configure your server through the HTACCESS file to send the MIME type automatically

 

Or / and your JSON could be malformed... you could test it in JSON validator

 

http://jsonlint.com/

[ro-achterberg 3 Likes (Newbie)]

It's been a while, but today I managed to find a fix for this.

 

It seems that for embedded SVG's (meaning, NOT included via an <img> or <object> tag), you have to be very explicit about the address of any url or href property you may have. I previously assumed that my <base> tag would take care of any svg URL resolving, but this doesn't seem to be the case.

 

I eventually fixed this by making all url and href properties refer to an absolute URL. This made the logo animation work on all underlying pages, and not just the index page.