Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

wumperloo

Members
  • Posts

    5
  • Joined

  • Last visited

Posts posted by wumperloo

  1. Here's a couple of other variations using jQuery.

     

    Easiest way to load and inject a single SVG. Just make sure the SVG element has the xmlns="http://www.w3.org/2000/svg" attribute on it.

    http://plnkr.co/edit/5l2al3EPl9HIK2FQgO2C?p=preview

     

    Load and inject multiple SVGs.

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

     

    Oh yes, thats actually much easier than the .get() method! I tried to combine this with ScrollMagic to trigger a GSAP animation once a certain container is in the middle of the view port but it didn't work. With the .load() method I got it working...

     

    Was a long way for me because it is the first GSAP animation I made!

     

    Here is the result:

     

    Link was deleted

     

    Thanks again for pointing me into the right direction!

    • Like 1
  2. Hi Scribble,

     

    The SVG inside the <use> tags won't show up in your CodePen because the file is on another domain and you aren't referencing it (#left-hand).

     

    <svg class="left-hand">
      <use xlink:href="http://my-server.com/left-hands.svg#left-hand"></use>
    </svg>
    
    However, using <use> might not be the best solution if you are trying to create SVG animations. First, IE does not support it, although there are ways around this. Second, the SVG is encapsulated so you won't be able to directly select your shapes/paths.

     

    // Won't work with <use>
    var hand = $("#left-hand-palm");
    
    Diaco did a good job of showing us how to embed and reference an SVG. However, an embedded SVG is encapsulated inside an external document, so things like your CSS styles won't crossover into the SVG's document. 

     

    I like to load external SVGs via Ajax, and then inject them into the page. Doing this will allow you to interact with the SVG just like an inline SVG. No need to modify your code!

     

    Here's a demo of how to display an SVG using the ajax, object, use, and inline approaches. Notice how only the ajax version works like the inline version.

     

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

     

     

    This method worked like charm for me on my wordpress site – thanks! ^^

     

    I have a really long svg with more than 1000 lines that some how broke by using it inline in wordpress...

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