Jump to content
GreenSock

Jomungand

Grabbing path data with jQuery does not work

Go to solution Solved by GreenSock,

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

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?

 

 

Link to comment
Share on other sites

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}});
  • Like 2
Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

  • Solution

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 

  • Like 4
Link to comment
Share on other sites

  • 6 months later...

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