Baklap Posted March 12 Share Posted March 12 Hi! I've been trying to use the motion path to get an object to float around my div in the center. Im only running into this issue where my designer wants the arrow to point at the center at all times. I've tried making a second gsap to arrow that can rotate the object on the line at certain intervals but i have no clue when the intervals exactly happen? Also id think it would be much easier to lock the arrow to the div in the middle. In the first loop you can kinda see what i mean to accomplish because it's pretty good but now imagine i want to do this with 10 arrows with randomized patterns. The result would look so cool but im just stuck on this one thing. I found this option: MotionPathPlugin.pointsToSegment But the documentation on it is kinda poor and i dont know how to get it work and if it would even fullfill my needs. If someone could clarify or help me out in any way shape or form i'd much appreciate it See the Pen zYXqRVL by GoldenNathan (@GoldenNathan) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 12 Share Posted March 12 Hi @Baklap welcome to the forum! You can use the autoRotate: true, in the motionPath object. Of course the motion path doesn't know what the correct direction is of the shape, so it gets the shape you give it and makes that following the path. I think this is an arrow head? So you want to create the arrow to point in the right direction in your design program (or manually rotate it with gsap on page load) Then in the onRepeat call back, flip the image when it goes in reverse. Is dit waar je naar opzoek bent? Hoop dat het helpt en veel geluk met je project! See the Pen OJGXbEL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Baklap Posted March 12 Author Share Posted March 12 Hi! Thank you! And thank you for the quick response. This is not exactly what im looking for, maybe i explained it wrong. I want it so that the tip of this arrow is always pointing towards the div in the center regardless of the path it follows. Basically making it lock on to a target div or a set of coordinates on the page. Bedankt voor de hulp :p! Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 12 Share Posted March 12 Yes, if you create your assets correctly you can use autoRotate to have it always point at the middle of the shape it is following. I can't fix your artwork for you, but here is a quick demo. Remove all GSAP code to view how the artwork is created, eg the triable points down and thus it will always point to middle point of the shape. Indeed it does not track the middle point of the object if the shape isn't a perfect circle, but this gets you 90% of the way there. See the Pen gOyMgWr?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen More complex shape See the Pen VwNjPQY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Baklap Posted March 12 Author Share Posted March 12 Hi, thanks again! I see what you mean but what if i make the path messy? See the Pen MWReJVB by GoldenNathan (@GoldenNathan) on CodePen I still want the arrow tip to always be focused on the "hello world". If it's not possible thats also okay, i can make a less impressive path for the arrows and customize the rotate function so that it will align perfectly along the path. But my end goal was to make the path randomized and have the arrow always point towards the hello world no matter how long or weird the path gets Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 12 Share Posted March 12 This is certainly possible, but is going to require a lot of math to get it perfect. A while back I came across Math.atan2() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2 which gets you an angle from a center point, so I feel like this is certainly possible, but I think there is nothing build in to GSAP that is going to figure this out for you, that is why I came to that solution, given a fairly simple path and autoRotate gets you 90% there. You can certainly spend days getting that 10%, but how much is that worth? Seems like a fun challenge though, but it is beyond the scope of the help we can provide on these free forums. I'm going to mark the topic, so maybe if someone else has a brilliant idea they'll post it here. Veel geluk met het project! 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 12 Solution Share Posted March 12 We usually don't code a custom solution for you in these forums, but I knew how to do this and figured it'd be fun challenge, so here you go: See the Pen PogzKNO?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 2 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 12 Share Posted March 12 I should have paid more attention in math class 🤯 1 Link to comment Share on other sites More sharing options...
Baklap Posted March 13 Author Share Posted March 13 13 hours ago, GreenSock said: We usually don't code a custom solution for you in these forums, but I knew how to do this and figured it'd be fun challenge, so here you go: Is that what you're looking for? Oh my! This is exactly what i meant! Thanks a lot! Link to comment Share on other sites More sharing options...
GreenSock Posted March 14 Share Posted March 14 21 hours ago, Baklap said: Oh my! This is exactly what i meant! Thanks a lot! Happy to help! 💚 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