moving the end of a line to a new position

[sinobra]

I have an animation with 20 little circles, and 4 larger circles.  The small circles are connected to the large circles by lines. 

At one stage of the animation, I move each of the larger circles to a new position, and move the ends of the connecting lines to follow  the moving circle.

Most of the line-ends move smoothly in conjunction with the moving circles.  However some of line-ends immediately reposition themselves somewhere out in left field and only match up with the moving circle at the ends of it's travel.  I have not yet figured out what is different about those lines.  Any ideas?

See the Pen RwGOJyy by sinobra (@sinobra) on CodePen

[GreenSock]

I didn't have time to parse through all that code (it'd be super helpful if you could provide more of a minimal demo, like with just one set of circles and one tween, for example) but I noticed one thing right away: 

 

You're trying to animate a complex string value in the "d" attribute which is fine as long as you've got matching quantities of numbers inside the start and end values, and the non-numbers inbetween also match. But yours don't - some of them start with "M" (uppercase), and some start with "m" (lowercase). Those have very different meanings in SVG (one is absolute, one is relative). 

 

So if, for example, you ask GSAP to interpolate between the following strings: 
 

"M0,0 1,1"
"m5,5 8,8"

They do have matching quantities of numbers, so GSAP will isolate each one (in order) and match them up so that the first 0 animates to 5, and the second 0 also animates to 5, and the 1 animates to 8, etc. But how is it supposed to interpolate "M" to "m"? It can't. It just uses the end string there. So you're essentially flipping from "M" to "m" which, again, have very different meanings. 

 

Of course this is exactly what MorphSVGPlugin solves. It can morph from any "d" string to any other "d" string because it knows how to turn those strings into cubic beziers, add points where necessary, and do a lot of fancy stuff to make the morphing look as smooth as possible. But you're merely doing a plain attribute interpolation between two complex string values. Very different. 

 

One solution is to homogenize your values so that they're all consistently using "M" or "m". Another solution is to use MorphSVGPlugin instead.

 

Does that help? 

[sinobra]

Hi Jack.  That helps enormously!  Thanks!

[sinobra]

I created the lines in Inkscape.  I have no idea why some lines use 'm' and others 'M'.  But I'll regularize the d attributes.

[mikel]

Hey @sinobra,

 

Here are two more suggestions:

 

See the Pen KKddmJm by mikeK (@mikeK) on CodePen

 

See the Pen ZEbGYbG by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel