Jump to content


Svg follow the cursor along a regression curve

Recommended Posts

Hello there,

I have a problem of getting the draggable object adjust to the cursor speed and position along a regression curve,

I managed to drag the svg along the regression curve with the motion path but and getting the color shades change with the cursor position, but can't seem to be able to position the dragable element to a certain position by the aliginOrigin, i don't know how it seemed to fail.


i have finally been able to add a the code of the problem (https://codesandbox.io/s/regression-curve-demo-w4v8x?file=/src/App.js)


I am really grateful for any help rendered




See the Pen App.js by s (@s) on CodePen

Link to comment
Share on other sites

5 hours ago, Andy0 said:

i wasn't able to reproduce it on codepen because it is in react.

You are welcome to use CodeSandbox.io instead if you're not sure how to use React in CodePen. Here's a starter template you can fork: 



We're happy to answer any GSAP-specific questions. Custom consulting about logic issues is beyond the scope of help we can provide for free, but perhaps if you can provide a minimal demo we'll be able to notice an issue quickly. 

Link to comment
Share on other sites

This thread has some good examples to learn from. The demos are using an older version of GSAP and the BezierPlugin, but the concept of how it works is still the same.



Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.