Animating along a path

[CarpeDiem]

I am using the morph SVG plug in to animate a PNG along a path that I drew in illustrator.  I saved the SVG code as my path and the animation works okay EXCEPT  i want the animation to happen in the reverse direction.

 

Here is my path code:

<svg width="800" height="800">

  

  <path id="anim_path" class="st458" d="M353.7,27.4c0,0-262.6,1.6-264.2,87.4s165.4,169.7,165.4,169.7" fill="none" stroke="black"/>

</svg>

  

and here is the script:

 

var tl = new TimelineMax({paused:true});

var bezierData = MorphSVGPlugin.pathDataToBezier("#anim_path");

tl.set("#chip", {autoAlpha:1, xPercent:-50, yPercent:-50});

tl.to("#chip", 1, {bezier: {values:bezierData, type:"cubic", autoRotate:90}, ease:Linear.easeNone, repeat:0, yoyo:false});

tl.play();

 

 

Any ideas as to what I did wrong.

[OSUblake]

Your bezierData is an array, so why don't you try reversing it. 

var bezierData = MorphSVGPlugin.pathDataToBezier("#anim_path").reverse();

That reverse method is not the same as GSAP's. Here's some info about reversing an array.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

 

If that doesn't work, please provide a demo.

 

 

.