cooganb Posted February 7, 2021 Share Posted February 7, 2021 Hi there! I've been wanting to dig into MotionPathPlugin for a while but just getting a chance to now. I have a question on positioning: As you can hopefully see in the example, I have a series of circles positioned along a path. I'd love to animate each circle start at the beginning of the path to go to their original position on the path while following the path. Is this possible? Thanks for the help! See the Pen dyOMgwV by cooganb (@cooganb) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted February 7, 2021 Share Posted February 7, 2021 Hey @cooganb, If the points on the path are evenly distributed, then this could be an option: See the Pen PobNLqX by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
cooganb Posted February 7, 2021 Author Share Posted February 7, 2021 Thanks for this, @mikel ! I wasn't sure about `end`, so thank you for sharing that. Is that the best way to dictate starting or finishing position? And when using `from()`, for example, everything appears on the path coordinates. The object doesn't retain any of its original x,y values? Link to comment Share on other sites More sharing options...
mikel Posted February 8, 2021 Share Posted February 8, 2021 Hey @cooganb, As stated in the DOCs, start and end are the proper options. See the Pen PobNrEv by mikeK (@mikeK) on CodePen Happy ending ... Mikel Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 8, 2021 Share Posted February 8, 2021 Hey cooganb. The issue here is that MotionPathPlugin has no way of knowing that the objects are along the path to begin with. How could it determine what progress value of the animation along the path it should be? It really can't. I recommend creating the initial position of the dots along the path by attaching each to the actual path position using MotionPathPlugin. Then you can do figure out what the end value for that dot should be. See the Pen XWNKKrd?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
PointC Posted February 8, 2021 Share Posted February 8, 2021 This demo may give you some ideas too. I distribute the targets along each path. See the Pen XWrYmGq by PointC (@PointC) on CodePen Happy tweening. 3 Link to comment Share on other sites More sharing options...
cooganb Posted February 27, 2021 Author Share Posted February 27, 2021 @ZachSaucier @PointC Apologies for not responding sooner! Thank you for both these responses, I'll check out the demo! 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