Jump to content
GreenSock

Friebel

morphSVGplugin with GreenSockGlobals throwing errors

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

Hi,

 

When using greensockglobals object, I can't get the morphSVGplugin to work (it throws errors).

The drawSVGplugin DOES work with greensockglobals, but if I use the morphSVGplugin the same way I use drawSVGplugin, it's not working. If I code without using greensockglobals, both plugins works perfectly fine. But obviously I want to use the globals object.

 

Could this be a bug in the morphSVGplugin? (Not respecting the greensockglobals object) Or am I doing something wrong here?

 

 

THIS IS MY CODE WITHOUT GREENSOCKGLOBALS (working fine)

[... greensock lib here...]

var tl = new TimelineMax();
tl.to('#objectFrom', 0.2, { morphSVG: { shape: '#objectTo' }, ease: Linear.easeNone });
 
 
THIS IS THE SAME CODE WITH GREENSOCKGLOBALS (throwing errors):
var gs = window.GreenSockGlobals = {};
[... greensock lib here...]

var tl = new gs.TimelineMax();
tl.to('#objectFrom', 0.2, { morphSVG: { shape: '#objectTo' }, ease: gs.Linear.easeNone });
Thanks in advance!
Link to comment
Share on other sites

I suspect Zach is right - you were talking about the findShapeIndex() utility, right? I can't imagine why MorphSVGPlugin would act differently and not honor the globals thing unless maybe you're not setting it up properly, but it's tough to say without seeing a sample codepen or your files where the error is occurring. Any chance you could show us that? We'd love to help. 

Link to comment
Share on other sites

Thanks for your reactions Zach and Jack.

 

It seems indeed a similair problem, but no, unfortunately this is not about the findShapeIndex utility, but about the morphSVG plugin itself. 
The drawSVG plugin IS working with the GreenSockGlobals here locally and I'm using the exact same notation for the morphSVG plugin, wich fails to run on the globals... :(
 

I created a codepen. Read next post :)

Link to comment
Share on other sites

I had a little struggle having script code executing before loading the greensock lib in codepen, but here it is:

 

A little description:

- The star on the left is moving up and down without using morphPlugin to show usage of the GreenSockGlobals is working

- The circle-to-rect morph on the right IS working fine if the GreenSockGlobals isn't used (remarked bottom example in JS field), 

  but throws errors when using GreenSockGlobals

(- I haven't got the time to add an example of using the drawSVG plugin with GreenSockGlobals, but I have that running locally here, and IS working perfectly fine with the GreenSockGlobal with the same notation as I use now with the morphSVGplugin)

 

See the Pen PZxgeO by maarten77 (@maarten77) on CodePen

Link to comment
Share on other sites

Hm, are you sure the URL is correct? I tried viewing that and it had a 404 error. 

Link to comment
Share on other sites

@Jack I saw the same thing. But strangely it was only receiving a 404 in Chrome, but working in Internet Explorer 11 and Firefox.

 

I just figured out what's the problem: There was a space at the end of the URL. 

So Chrome didn't buy that and throws a 404, while Internet Explorer 11 and Firefox probably strip that space and load the page pefectly.

 

I adjusted the URL, so now it should work in all browsers:

See the Pen PZxgeO by maarten77 (@maarten77) on CodePen

Link to comment
Share on other sites

Thanks Diaco, nice workaround. And a step closer understanding what's happening here.

 

So your codepen points to the shape-property of the morphSVGPlugin. Wich obviously CANNOT handle selectorstrings ONLY if the GreensockGlobals object is being used. On code wich doesn't use the globals object, selectorstrings inside the shape property ARE working fine.
So there's a different in the morphSVGplugin handling code with GreensockGlobals / without GreensockGlobals.

For example, this code IS working with selectorstring in the shape property, without using the global thing:

TweenMax.to('#morphFrom', 1, { morphSVG: { shape: '#morphTo' }, ease: Linear.easeNone, repeat: -1, yoyo: true } );

So it looks to me like a bug in the plugin, or at least unwanted behaviour. But I could be wrong?

  • Like 1
Link to comment
Share on other sites

Could somebody from Greensock shine a light on this one? Jack?
(I was about to put an issue on the Greensock github, but then I figured the morphSVGplugin isn't hosted there)

Would be much appreciated! :)

Link to comment
Share on other sites

  • Solution

You're absolutely right - I see what you mean. I believe it should be fixed now. Thanks for bringing that to our attention. Let me know if it works well for you now. 

  • Like 3
Link to comment
Share on other sites

You're absolutely right - I see what you mean. I believe it should be fixed now. Thanks for bringing that to our attention. Let me know if it works well for you now. 

Thanks for your quick response Jack! It's working great now with the globals object! :)

  • Like 1
Link to comment
Share on other sites

  • 2 years later...
On 2/9/2016 at 10:45 PM, Friebel said:

Hi,

 

When using greensockglobals object, I can't get the morphSVGplugin to work (it throws errors).

The drawSVGplugin DOES work with greensockglobals, but if I use the morphSVGplugin the same way I use drawSVGplugin, it's not working. If I code without using greensockglobals, both plugins works perfectly fine. But obviously I want to use the globals object.

 

Could this be a bug in the morphSVGplugin? (Not respecting the greensockglobals object) Or am I doing something wrong here?

 

 

THIS IS MY CODE WITHOUT GREENSOCKGLOBALS (working fine)


[... greensock lib here...]

var tl = new TimelineMax();
tl.to('#objectFrom', 0.2, { morphSVG: { shape: '#objectTo' }, ease: Linear.easeNone });
 
 
THIS IS THE SAME CODE WITH GREENSOCKGLOnnnnnnnnBALS (throwing errors):

var gs = window.GreenSockGlobals = {};
[... greensock lib here...]

var tl = new gs.TimelineMax();
tl.to('#objectFrom', 0.2, { morphSVG: { shape: '#objectTo' }, ease: gs.Linear.easeNone });
Thanks in advance!

 

Link to comment
Share on other sites

Hi @saroj;

 

Welcome to the GreenSock Forum.

 

What´s your question / your problem ??

 

Kind regards

Mikel

 

 

Link to comment
Share on other sites

Hi Saroj,

 

Welcome to the GreenSock forums.

 

It isn't proper for everyone that has been part of this old conversation (resolved 2 years ago) to be bothered with new notifications.

You may have a similar issue, but quoting the initial question doesn't really tell us what you need help with, or why the solution offered isn't working for you.

 

Please start a new topic that contains a clear description of the problem you are facing. We'll be happy to help.

Link to comment
Share on other sites

  • Carl locked this topic
Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×