Hughie Posted April 16, 2021 Share Posted April 16, 2021 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 More sharing options...
Solution GreenSock Posted April 16, 2021 Solution Share Posted April 16, 2021 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 I had to add an <svg> and <path> to house things, and I sized it to match exactly on top of your element. 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! 2 Link to comment Share on other sites More sharing options...
Hughie Posted April 16, 2021 Author Share Posted April 16, 2021 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 More sharing options...
Hughie Posted April 16, 2021 Author Share Posted April 16, 2021 Now that I can see the path and tweak it visually I need to use those new values. How would that be done? Link to comment Share on other sites More sharing options...
Hughie Posted April 16, 2021 Author Share Posted April 16, 2021 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 More sharing options...
PointC Posted April 16, 2021 Share Posted April 16, 2021 Just a curiosity question. Are you creating the path like that for a reason? I only ask because I'd just create the spiral in my vector software to my liking and be off and spinning. See the Pen PoWBYXm by PointC (@PointC) on CodePen Again - just curious and just my two cents worth. Happy tweening. Link to comment Share on other sites More sharing options...
Hughie Posted April 16, 2021 Author Share Posted April 16, 2021 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 More sharing options...
OSUblake Posted April 16, 2021 Share Posted April 16, 2021 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. 🤷♂️ See the Pen fd7b3512dd17c0e36d99b6e767110805 by osublake (@osublake) on CodePen Link to comment Share on other sites More sharing options...
Hughie Posted April 16, 2021 Author Share Posted April 16, 2021 I twiddled with it and now it's broke. Starting point should be this one - See the Pen fd575bea13899015c4f089c244f02165 by GreenSock (@GreenSock) on CodePen . Link to comment Share on other sites More sharing options...
GreenSock Posted April 17, 2021 Share Posted April 17, 2021 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: 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. 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? 1 Link to comment Share on other sites More sharing options...
Hughie Posted April 17, 2021 Author Share Posted April 17, 2021 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 More sharing options...
Hughie Posted April 17, 2021 Author Share Posted April 17, 2021 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 More sharing options...
mikel Posted April 17, 2021 Share Posted April 17, 2021 Hey @Hughie, You could position the kite on the starting point of the path. #kite-wrap, #kite { position: absolute; top: 290px; // d="M 140 300 left: 120px; width: 45px; height: 25px; background-size: 45px 25px; } See the Pen xxgJLzY by mikeK (@mikeK) on CodePen Happy kiting ... Mikel 2 Link to comment Share on other sites More sharing options...
mikel Posted April 17, 2021 Share Posted April 17, 2021 Hey @Hughie, You could vary the speed of the kite. Depending on whether rising or falling: Here is a logic from @OSUblake See the Pen aWQdLa?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
Hughie Posted April 17, 2021 Author Share Posted April 17, 2021 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 More sharing options...
mikel Posted April 17, 2021 Share Posted April 17, 2021 Hey @Hughie, A quick way to get a path, without having to open tools is SVG Path Builder of Anthony Dugois (here a See the Pen bGgjYXZ by mikeK (@mikeK) on CodePen ). With a little practice it works with a perfect curve. And here is another little pocket guide for SVG. Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
GreenSock Posted April 17, 2021 Share Posted April 17, 2021 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 More sharing options...
Hughie Posted April 17, 2021 Author Share Posted April 17, 2021 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 More sharing options...
GreenSock Posted April 18, 2021 Share Posted April 18, 2021 2 hours ago, Hughie said: why is it different in my context? Tough to say without seeing your context Feel free to post a minimal demo and we can take a peek, but my guess is that it's related to what I mentioned above (placement of the SVG you're looking at). 1 Link to comment Share on other sites More sharing options...
mikel Posted April 18, 2021 Share Posted April 18, 2021 Hey @Hughie, Sometimes it is better to have all in one. Let´s kite See the Pen WNRKWLQ by mikeK (@mikeK) on CodePen Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
mikel Posted April 18, 2021 Share Posted April 18, 2021 I couldn't do it with the quickSetter. But with this construction it works. See the Pen NWdLWgM by mikeK (@mikeK) on CodePen Link to comment Share on other sites More sharing options...
Hughie Posted April 18, 2021 Author Share Posted April 18, 2021 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 More sharing options...
akapowl Posted April 18, 2021 Share Posted April 18, 2021 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. 3 Link to comment Share on other sites More sharing options...
Hughie Posted April 18, 2021 Author Share Posted April 18, 2021 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 More sharing options...
akapowl Posted April 18, 2021 Share Posted April 18, 2021 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now