Grabbing path data with jQuery does not work

[Jomungand]

Hey,

 

i'm curious if i am not getting something.

 

I recently tried a SVG animation using the MorphSVG plugin. I grabbed the path data with jQuery like so:

 

var myPath = $('#myPath').

 

When i used the variable in the MorphSVG plugin (.to("#circle", 1, {morphSVG: myPath})), i got the following error in the console:

 

"WARNING: invalid morph to:"

 

but when i grabbed the variable with document.getElementbyID it worked.

 

Now, did i miss something, or is this an error?

 

 

[Diaco]

Hi Jomungand 

 

pls try like this :

 

var myPath = $("#star")[0];
TweenLite.to("#square",1,{morphSVG:myPath});

// or

var myPath = $("#star");
TweenLite.to("#square",1,{morphSVG:{shape:myPath}});

[Jonathan]

To add to Diacos great code example

 

Jomungand, A codepen example would be really helpful to see your code in context because the code posted above is missing syntax and context. Here is a video tut by GreenSock on How to create a codepen demo.

 

[GreenSock]

I just updated MorphSVGPlugin to accommodate this situation (using a jQuery object instead of a "real" DOM element or selector text). Version 0.5.1 

[Jomungand]

Thank you guys. Just great Jack

[mcnab]

Just chiming in - this answer helped me solve a problem I had running Greensock in Magento CE1.x.  As Magento uses Prototype you have to run jQuery in noConflict mode.  This caused the;

 

WARNING: invalid morph to

 

 

Error on a MorphSVG (v0.8.4) but it also caused an error using TweenLite, in my case;

 

TweenLite.min.js:12 Uncaught TypeError: Cannot create property '_gsTweenID' on string '#logosvg'

 

 

Basically the same reason in both cases, which was that I was using the div id directly.  By assigning it to a variable first it started working.  So this;

    TweenLite.set("#logosvg", {onComplete:logoComplete});

Doesn't work but this did work;

 

     var logosvg = document.getElementById("logosvg");        
     TweenLite.set(logosvg, {onComplete:logoComplete});

 

And this doesn't work;

 

var tl1 = new TimelineLite({});
tl1.to(twitterCircle, 0.4, {morphSVG:"#twitter-social-icon", fill:"#000"}, "+=1")

But this does;

var tl1 = new TimelineLite({});
var twitterSocial = document.getElementById("twitter-social-icon");
tl1.to(twitterCircle, 0.4, {morphSVG:{shape:twitterSocial}, fill:"#000"}, "+=1")

 

Note that in  both cases the code all worked fine in the flat HTML/CSS/JS static site I did the frontend in.  It only failed once I'd put it into Magento and applied noConflict mode. For info I'm using an older version of jQuery (1.11.1), it may be that. Hope this helps,

 

Cheers,

 

Robbie