Jump to content
GreenSock

Allgress

TweenMax.to giving infinite errors

Recommended Posts

I'm making a call to animate a wedge in my chart from one position to another like so:

TweenMax.to("#wedgePath_" + id, 1, { morphSVG: data[j].Value[1] });

 

This for every other wedge in my chart except one, where the wedge doesn't animate and instead just infinitely repeats an error (I'll screen shot the detail and attach it).

 

The "wedgePath" + id matches the id of the wedge in chart. 

 

The original path is "M229.8083 276.5665 A185 185 0 0 1 268.2768 233.1447 L220.6919 132.8616 A185 185 0 0 0 124.5208 241.4164 Z"

and data[j].Value[1] is "M374 300 A185 185 0 0 1 374 300 L485 300 A185 185 0 1 0 485 300 Z".

 

 

If I comment out that one call to TweenMax.to the wedge animation doesn't work, but I also don't get any errors.

If I comment out that one line, the wedge animation doesn't work, but I also don't get any errors.

post-47493-0-19315200-1478134693_thumb.png

Link to comment
Share on other sites

I would console.log out the "#wedgePath_" + id part. I suppose the id is running out of range in Your loop. 

Link to comment
Share on other sites

The last wedge id it logs is the id of the wedge that's not animating (which is a valid id), then it errors.

Link to comment
Share on other sites

I'm sure we can help you if you provide a simplified CodePen demo.

 

  1. visit this demo http://codepen.io/GreenSock/pen/rOjeRq
  2. press the Fork button (to create a copy)
  3. replace the existing HTML, CSS and JS with yours
  4. provide the link here

Try to reduce your demo to the least amount of code as possible to replicate the issue.

 

Thanks!

  • Like 1
Link to comment
Share on other sites

Phew. I separated the problem wedge and js from everything else.

 

You can find it here:

See the Pen rWNLKP by anon (@anon) on CodePen

Link to comment
Share on other sites

I think there's a problem with the path parser, possibly a divide by 0 error. If I add a line command right before the arc command, I can get it tween...

See the Pen 96034d3dea2948911e69304eb045c541 by osublake (@osublake) on CodePen

 

I know that's not what you want, but it's demonstrates that there is problem parsing the arc command. @GreenSock will probably to investigate this.

  • Like 1
Link to comment
Share on other sites

Thanks a lot for the response OSUblake. Is there a specific bug tracking area or should the see this eventually?

Link to comment
Share on other sites

I sent a message to Jack. If it is a bug, he usually posts a link where you can grab the fixed version as soon as it's fixed.

  • Like 1
Link to comment
Share on other sites

Thanks for pointing this out, guys. It was an invalid arc command, but I needed to add some logic to skip it when it encounters that condition. It should be resolved in the updated version which you can try on codepen using this URL: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js 

 

Please let me know if that works well for you and then I can drop it into the official download zip packages. 

  • Like 1
Link to comment
Share on other sites

Hey Jack,

Thanks for the response! It looks like that link is broken (at least on my end). I just get a page that say "This XML file does not appear to have any style information associated with it. The document tree is shown below."

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