Problems integrating animated SVG in WordPress

[wumperloo 4 Likes (Newbie)]

Hi there,

 

I just started to work with GSAP and I made my first animated SVG. I developed everything local and now I wanted to integrate it in my WordPress site.

 

The inline SVG has round about 1000 lines and wordpess some how struggles with this much lines. The result is that the svg looks broken and parts of it are missing. So I integrated the svg with <object></object> now it looks proper.

 

I also enqueued all scripts but the animation is just not starting. In the console I can't see any errors related to this.

 

Any of you more experienced guys may have a look at my work? I hope you can see what I did wrong on a glance!

 

Here is the link

 

 

Some background information:

 

I use a caching plugin and a CDN but allready tried it without caching and CDN... no result.

 

Thanks in advance!

 

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

I'm seeing a lot of errors related to jQuery not being defined or present. Will be very difficult to know why your SVG animation isn't working until those are fixed

 

http://prntscr.com/ajx9e8

[Carl 9,066 Likes (Superhero)]

Also, its very difficult for us to chase down where you animation code is or the code that loads the svg.

 

Since we can't edit your code you should add some console logs that verify the following

 

1: the SVG is in the DOM before you try to query elements (like paths, rects, g, etc)

2: once the SVG is loaded and accessible you should verify that your selectors are correct. 

 

This post should be of great help. http://greensock.com/forums/topic/12321-non-inline-svg-and-control-with-gsap/

I recommend Blake's ajax solutions:  http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview

[wumperloo 4 Likes (Newbie)]

Thanks for the advices Carl! I will read the resources you posted...

[wumperloo 4 Likes (Newbie)]

For others that maybe struggle with the same problem I've found a solution by this method here:

 

http://plnkr.co/edit/LneUEK?p=preview

 

The inline svg gets injected into the site with ajax...

 

Worked like charm. Here is the thread about it:

 

http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/

[OSUblake 9,990 Likes (Superhero)]

I just posted a couple other variations in that thread.

http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?p=59586

 

Using the .load() method is the easiest if you only have 1 SVG.