Tweening along a defined path

[drewbit]

If I have a set number of coordinates, say a user draws an s-curve with their mouse/finger, what would be the best way to tween an object along the same path?

 

I can loop a bunch to TweenTo calls but I'm wondering if there is a better way? A plugin maybe that helps with this?

 

Thanks for any suggestions. 

[Jonathan]

Hello drewbit, Welcome to the GreenSock Forums!

 

Have you looked into the Bezier Plugin?

 

Bezier Plugin Docs:

http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

 

Animate virtually any property (or properties) along a curved Bezier path which you define as an array of points/values that can be interpreted 4 different ways (described as the Bezier's "type", like type:"soft"): "thru" (the default) - the plugin figures out how to draw the Bezier naturally through the supplied values using a proprietary algorithm.

 

GreenSock BezierPlugin examples:

See the Pen ABkdL by GreenSock (@GreenSock) on CodePen.

See the Pen Kajpu by GreenSock (@GreenSock) on CodePen.

 

[drewbit]

Exactly what I was after! thank you very much.