Jump to content
Search Community

Motion path control

Hughie test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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?

See the Pen NWdypGj by psaikido (@psaikido) on CodePen

Link to comment
Share on other sites

  • Solution

As you probably know, that's no simple task. But you can use all the bonus plugins for free on CodePen, so you could wire it up sorta like this: 

See the Pen fd575bea13899015c4f089c244f02165?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notes

  1. I had to add an <svg> and <path> to house things, and I sized it to match exactly on top of your element.
  2. 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. I made them consistent and then just added an xOffset and yOffset constant that you can tweak to get it into view because you had negative values, making things off-screen. 

I hope that at least gets you moving in the right direction. 

 

You may find that a Club GreenSock membership pays for itself in a matter of days :)

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 - 

See the Pen jOyKjvj?editors=0110 by psaikido (@psaikido) on CodePen

.

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.

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

7 hours ago, OSUblake said:

I apparently don't know what I'm doing because I can't get these things lined up. Am I missing something here? And autoRotate looks strange. 🤷‍♂️

 

A few issues:

  1. alignOrigin is only for when there's an "align" value defined which requires an actual DOM element but there isn't one in this case since we're using a generic Array of values. You can tell MotionPathHelper to center the element by passing center: true in the vars object. 
  2. There was a bug in MotionPathHelper that caused it not to factor in the initial x/y offset into the preview, like if the element starts at non-zero x/y property values. That's fixed now, and you can preview the next release on CodePen [only] at https://assets.codepen.io/16327/MotionPathHelper.min.js

Here's a fork, @OSUblake

See the Pen 6f098b0fecb31811e31d741924d6b5a5?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better? 

 

2 hours ago, Hughie said:

I twiddled with it and now it's broke. Starting point should be this one - 

I don't understand. Can you elaborate? What's "broke" exactly? 

  • Like 1
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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).

 

Link to comment
Share on other sites

1 hour ago, mikel said:

Hey @Hughie,

 

You could position the kite on the starting point of the path.

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.

 

Link to comment
Share on other sites

14 hours ago, Hughie said:

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

Did you still need help with something or did you figure this out? 

 

Your path was way off the screen because your coordinates had negative values but your SVG was set up with its 0,0 coordinate near the top left corner of the page. You could shift that to where your element is starting so their origins are aligned, and set overflow: visible on the <svg>. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

That's very cool!

Here's a pen getting close to what I need 

See the Pen oNBMZmQ by psaikido (@psaikido) on CodePen

. 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?

Link to comment
Share on other sites

On 4/16/2021 at 5:21 PM, Hughie said:

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.

 

I've had that happen with Inkscape. Maybe you just need to set your viewbox / file-dimensions straight ( File > Document Settings  - In there there should be a box with your file's dimensions and one with scale. Make sure to set your file's dimensions AND viewBox to the dimensions of the container in your HTML and the Scaling to 1  -  I hope that makes sense, because I am actually using Inkscape in German localization ) 

 

As already mentioned just drawing out the paths in a vector editor would probably be the easiest way for this to work properly. All these paths here have been made with Inkscape - one starting where another one ends (snapping is very helpful with that regard) and the first path just starting about where you have positioned your kite via CSS .

 

See the Pen f5fb7e30c267d7551682f2b668c42026 by akapowl (@akapowl) on CodePen

 

 

What I usually do after I saved my file as .svg with Inkscape is pull that file into SVG-OMG and get the paths from there, because sometimes getting the paths from Inkscape's own xml-editor can give fonky results, too.

 

Maybe this helps.

 

  • Like 3
Link to comment
Share on other sites

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 - 

See the Pen oNBMZmQ?editors=0110 by psaikido (@psaikido) on CodePen

. 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.

Link to comment
Share on other sites

12 minutes ago, Hughie said:

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 is just the initial tween from the ground into the spiral. It's not part of the timeline because I repeat the timeline infinitely from the spiral part in that example. I wouldn't give too much attention to that.

 

Don't forget to set your alignOrigin though, so your kite aligns to the spiral nicely.

 

See the Pen 6791290a4984c8fc3fb422bb4bd0ba5c by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...