[move a div drawing a stroke path alongside]

Thank you guys for any suggestions! 

The MorphSvg plugin is the great tool and probably you convince me to join to GSAP Club. I will try to use it in my project together with the ModifiersPlugin. 

As for a div inside an SVG, It could be inside the SVG because I want to use the same scale for the div, the path and the Fibonacci figure.

 

Up till now, I've found a solution for responsive of the div path but It does not satisfy me. It doesn't work smoothly and I haven't full control of the div by GSAP.

 

See the Pen zZbmGG by gtruskowski (@gtruskowski) on CodePen

[move a div drawing a stroke path alongside]

Hi,

I am quite new in GSAP and I currently struggle at how to move the div drawing a stroke path alongside. I’ve tried a tons different method (include snap) but I didn't achieve my goal.

 

In the first example I’ve tried to copy x and y parameters which are use by the timeline “t1" in order to include them to timeline with “.divBox” (the div should move along the path). Unfortunately my method dosen’t work and I don’t know how to get x and y parameters from “t1” and use it as a value for ".divBox".

 

2. See the Pen gmEbNv by gtruskowski (@gtruskowski) on CodePen

My second method is quite simple but the div isn’t responsive, even if I coordinate x and y (especially when I change the window size).

 

I know that the MorphSVG plugin can offer a better solution for this problem but I can’t use any commercial plugins in this project.

 

Many thanks for any help!

 

See the Pen oZVNWJ by gtruskowski (@gtruskowski) on CodePen