MorphSVGPlugin - animating along the line causes the object to be animated on the right curve but at the wrong coordinates

[essentialtoils]

I am currently working on a project where an animation along the line is implemented, i.e. a chosen SVG element (in this particular case a <g> ) is moved along a <path>.

 

Previously, I have implemented this using Snap.SVG and it worked fine, however, having to also do some "morphing" on the elements, I decided to give MorphSVGPlugin a go to save resources.

 

However, so far it has not been a smooth ride...

 

Stepping through the code, I observe the following:

1. The object is rendered in a starting position (the correct starting position).

2. The line path is rendered (I used fill="blue" just to demonstrate the position of the line) - the starting point is supposed to be the top "corner", however, it is an invisible "looped" line.

2. The animation kicks in, and the object is instantly positioned somewhere else! This is the actual problem for me right now.

3. The object is animated along a correct curve!

 

This makes me think that MorphSVGPlugin.pathDataToBezier method is working as intended and provides x-y array of movement points. However, TweenMax.to() method seems to disturb the intended starting point for the animation, I really can't put a finger on it right now.

 

There is very little control I have over the artwork, which has been designed in AI and exported to SVG format.

 

Hoping to find the resolution to this problem as soon as possible.

See the Pen ZpYxEY by IGaMbLeRI (@IGaMbLeRI) on CodePen

[Carl]

Thanks for the demo. Very helpful.

The align property will help you here:

var path = MorphSVGPlugin.pathDataToBezier($("#es-za-invisible > path"), {align:"#orange", offsetX:-60, offsetY:-60});

new demo: http://codepen.io/GreenSock/pen/XjJEzN

 

docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/

[essentialtoils]

Thanks for your quick response! It does fix the #orange, indeed.

 

I have about 10 objects like that which I need to animate, is there a programmatic way to achieving the result? I mean, what's the reason for needing the offsetX and offsetY, and why "-60" in particular here?

 

Thanks in advance!

[Carl]

the negative offsets place the center of the object on the path. remove them and you will see the top-left of the orange follows the path.

might be cleaner for more objects to use negative xPercent and yPercent if you want to center multiple objects like:

TweenLite.set("#orange", {xPercent:-50, yPercent:-50})

http://codepen.io/GreenSock/pen/ozXNOd?editors=0010

[essentialtoils]

Works like a charm! Thanks a bunch!