Saif Posted February 23, 2022 Share Posted February 23, 2022 Hey everyone, I'm new to Gsap so forgive me if I mistake any technical terms. My animation is two-fold, first to animate a dot from wherever it may be in the document to a specific point on the circle path (for instance the halfway point in the path). Second, upon reaching the point on the circle path, an animation of following the circle path infintely. What I attempted to do was get the rawPath of the path and then getPositionOnPath to get the the co-ordinates of the halfway point of the path, however the co-ordinates appeared to be global. So I then used getRelativePosition and provided the co-ordinates from getPositionOnPath which I believe made the co-ordinates local to the Path. However as can be seen from the CodePen the dot does not go to the halfway point of the path (bottom of the circle). Can someone kindly tell me what I did wrong? or if there is a better way to go about this? Thank you in advance. See the Pen jOaKzEg by Safety_guy (@Safety_guy) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted February 23, 2022 Solution Share Posted February 23, 2022 Welcome to the forums @Saif It looks like the point you pass in needs to be relative to path's bounding box. See the Pen wvPXNem by GreenSock (@GreenSock) on CodePen 5 Link to comment Share on other sites More sharing options...
mikel Posted February 23, 2022 Share Posted February 23, 2022 Just a fun alternative: See the Pen yLPEwmM by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 6 Link to comment Share on other sites More sharing options...
Saif Posted February 23, 2022 Author Share Posted February 23, 2022 Thank you both very much, my animation is now functioning properly. It seems I have to brush up on some more methods and experiment 2 Link to comment Share on other sites More sharing options...
mikel Posted February 24, 2022 Share Posted February 24, 2022 Hey Saif, Successful experiments are the most fun. The pen above has been revised again. Happy trying for the better one ... Mikel 3 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