Aligning the animation different properties of two different SVG objects

[SGrimes]

I've given up and trying to figure this out by myself. Mostly because I want to get this animation finished. I am trying to line up the tweens 'line' and 'text' for the codeCatch timeline of the Master timeline. I want it to look like the text is attached to the end of the fishing line.  It's almost there but I'm at a loss at how to fix this on my own. The animation of the 'line' and the 'text' was aligned until I started animating the rotation properties in the earlier timelines.

See the Pen MyKrzr?editors=0010 by abreeman (@abreeman) on CodePen

[SGrimes]

I've given up and trying to figure this out by myself. Mostly because I want to get this animation finished. I am trying to line up the tweens 'line' and 'text' for the codeCatch timeline of the Master timeline. I want it to look like the text is attached to the end of the fishing line.  It's almost there but I'm at a loss at how to fix this on my own. The animation of the 'line' and the 'text' was aligned until I started animating the rotation properties in the earlier timelines.

 

 I don't know if my original post was clear. I was a little nervous. I was needing help with aligning the the animation for the 'text' and the 'line' objects or perhaps someone could tell me I'm just doing this wrong altogether and I should try something else.

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

 

Sorry it wasn't clear that we had to watch for ~16 seconds before seeing the text appear. 

It would really help if you could isolate the part of the animation that you need help with. remove everything (svg data, js code) that isn't related to the problem.

 

Diaco has a great demo of text animating along an SVG path: http://codepen.io/MAW/details/VLbYBL

 

Perhaps you can get an idea from that. 

 

It may take quite a bit of SVG-skills and some math to programmatically determine the end position of the line as it gets pulled up. Might be easy for some around here. Again, the more you can reduce the demo, the better your chances of someone being able to offer a solution.

[SGrimes]

Thank you! I have cleaned out as much of the javascript that I could without completely breaking the part my question is about. The animation is much shorter now and only GSAP bits that I'm having trouble with are left.   

 

Thank you for the link to Diaco's demo as well! I will have to look into adding a path to my code when I'm able to edit the original SVG file. I originally created the SVG image in Inkscape and copied the clean version into Codepen. Codepen doesn't seem to like it when I edit the SVG directly.

 

I hope the changes I made to my Codepen demo makes it easier to see where I'm having trouble.