Jump to content
GreenSock

designbase.studio

Problems integrating animated SVG in WordPress

Go to solution Solved by designbase.studio,

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

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!

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • Solution

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/

  • Like 1
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.
×