Hughie

For those who find themselves in a similar place, there's this -

Ah man, that thing of saving from inkscape and loading it into svgomg has cracked it! Maybe there's some bugs about as well as my own stupidity! Getting inkscape's document properties in line with the context in which the svg will be used too is super important of course. Here's a 99% there version - https://codepen.io/psaikido/pen/oNBMZmQ. A few tweaks remain but it's looking a lot better. On line 21 of your pen, you do a 'gsap.to' call before the timeline which has its own 'to's. I didn't understand that.

That's very cool! Here's a pen getting close to what I need https://codepen.io/psaikido/pen/oNBMZmQ. My kite's starting position is set in the css ('transform-origin: 50% 35%;'). The spiral's d path has to relate to that so it needs its starting coords to fit. The previous step in the flight path lands it up at right-ish and hi-ish at a certain angle so that it matches up to the start of the spiral and doesn't cause a jump as one tween stops and the next starts. So, how to set the starting position? How to scale the spiral to the right dimensions? The tries at answering my query so far are pretty great in themselves but I have to adjust this existing path somehow. If I use other folks suggestions as a starting point I end up in the same place, needing to set the starting position, adjust the path and scale it. Does anyone get me here?

Still fiddling with it, thanks for following up. The svgs I've been experimenting with have mostly come from the pens posted in this thread, that's one of the confusing things actually, why is it different in my context?... I'm taking my time with it, there's a lot to absorb. I'll look at the coordinate system next.

That's very cool what you've done there, thank you. In my codepen https://codepen.io/psaikido/details/oNBMZmQ it does exactly that already. What I want to know is the process you went through to derive that svg path. How to control its starting and ending points and the exactness of the path? Controlling the speed is interesting too but that isn't really the issue I'm focusing on here. Thanks for your interest.

Thus! https://codepen.io/psaikido/details/oNBMZmQ You'll see the path is 'lumpy' when it gets into the centre. To be clear, the goal here is to have a way to adjust the path so that the motion looks better. All attempts at modifying it to use an svg path have resulted in the kite suddenly appearing way off down and to the right out of the #wind-window and/or being too small. Inkscape paths have been tried too but I lack the skill to make it work. Actually flying the kite irl is way easier than this so far For the interested, here's a link to the real thing (at 1:15).

I'm going to try and unmuddle things with a new codepen that is more specific. I took out too much detail from my project to make the original and then with multiple forks and not understanding codepen enough (I'm new to it) things have got a bit strange. Another factor here is I'm also new to svg and am struggling with it. When I drop in a path from one of the answers in this thread into my project, the path is waaaay off screen. So far I've not been able to wrastle them into making any sense. As I said, I'll make a new pen. Just so folks know, if I can get a method of improving these paths then there are many kite patterns to fix up and there will be much rejoicing

I twiddled with it and now it's broke. Starting point should be this one - https://codepen.io/GreenSock/pen/fd575bea13899015c4f089c244f02165.

It's to be used for this and similar kite patterns - https://carrollonline.uk/uqyqe.html/. The 'spiral in' and 'out' parts are nearly right but as you will see they are kinda lumpy towards the centre. I can make an svg in inkscape and drop that into my software much as your codepen but it starts at the wrong place and is the wrong size when I run it. This is driving me crazy The motion path helper bit gives me another pile of weirdness that is currently unusable. (I think I might need a rest at this point).

So, I managed to figure out how to grab the svg path out of the editor and get it looking way better. It's nearly there. I copied the forked pen and find that it doesn't remember the changes I make to the handles or points. Here it is anyway - https://codepen.io/psaikido/pen/jOyKjvj?editors=0110. The issue now is if I drop the svg path into my animation, the path seems to be all absolute values and happens off screen. I twiddled with inkscape and tried turning all the uppercase to lower to no avail. How the fiddlesticks is one supposed to get the animation to start from where I want it to? Any help much appreciated.

Now that I can see the path and tweak it visually I need to use those new values. How would that be done?

Well done! Thank you What a great idea to use the bonus plugins on codepen. (bows deeply) "It looks like you were totally changing the coordinates that you were showing with your red dots, compared to what you had in your Array." In my codepen the red dots are defined by the array so I don't understand what was happening in your view of it. "you had negative values, making things off-screen" The negative values come from the fact that the tweens I'm using are relative to an objects starting values so that's probably the cause of that. Maybe the cause of the first issue too.

For the motionPath defined in the codepen I have an object that moves along it. This is a spiral inwards motion. It's all working basically but now it needs fine-tuning and it would be great to see the path that these points create. Atm I have to twiddle and run the animation over and over to see how it's working by trial and error. I know there is a paid for tool to make this task a lot easier, but all that I'm after here is a way to see the path that the motionPath plugin will make. Searching has lead me to many basic tutorials on how to get started with gsap or hugely complex svg projects. Is there a simple solution to this?

@mikel, great idea, thanks, I'll look into it!

@PointC, @Cassie, thanks both, the position parameter is what was needed, top job https://carrollonline.uk/pages/kites/gsap-demo.html