Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Moving an element along a custom path

Recommended Posts

Hey all,


I'm rather new to GreenSock. I've watched a couple of the introduction videos on the docs and searched around specifically for an answer to this question but seem to be getting a little lost, so I apologise in advance if this is an obvious question.

I have an object which I'm trying to move along a specified path (as seen in the image) and was wondering if Greensock had something to assist with moving objects along a custom path a little easier than me typing in coordinates.


The final destination is

position: fixed;

and therefore is always in the same place (ref: end of the line in the image). The starting point (ref: circle in the image) can vary in position on the page.




Share this post

Link to post
Share on other sites

You can do that by using MorphSVGPlugin, which you will need to convert path data into bezier. Then you can move your element along the path.


Check animate along the path section in the end of docs https://greensock.com/docs/Plugins/MorphSVGPlugin


See the Pen vRKBmP?editors=1010 by Sahil89 (@Sahil89) on CodePen



  • Like 4

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.