Jump to content


Animation works on some URLs, but not others?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

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

I am attaching the console errors.





Link to comment
Share on other sites

these are the errors I am seeing 






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.

  • Like 2
Link to comment
Share on other sites

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


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



  • Like 2
Link to comment
Share on other sites

  • 2 months later...

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.