move a div drawing a stroke path alongside

[gregorio500]

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

[ryanf]

Gregorio, 

 

Here is one approach to moving a div along a path.  

 

See the Pen XMGmeE by rfenik (@rfenik) on CodePen

[PointC]

I'd certainly use the approach ryanf is using in his demo.

 

You said "I can’t use any commercial plugins in this project." Did you mean because you're not a Club GreenSock member or you actually are not allowed to use them on the project? If it's the former, I'd recommend joining the Club so you can use the MorphSVG plugin. You'll save lots of time and membership pays for itself quickly. If it's the latter, that does put you in a tough spot. 

 

I'd suggest taking a look at the Bezier plugin:

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/

 

Hopefully that helps a bit.

 

Happy tweening.

[GreenSock]

Yeah, that's not a trivial task if you want just the path to scale to the page and be completely dynamic so that while things are animating, you could resize the window and everything would adjust accordingly. Very possible, but complex. 

 

Does it have to be a DIV? Could you just have everything inside an SVG? That'd certainly make it easier (though everything would scale together which may not be what you want). 

 

One option is to figure out the concatenated inverse matrix for the path and use the ModifiersPlugin to transform the x/y values on-the-fly. Again, not easy or simple, but doable with some math and wizardry. 

[gregorio500]

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