Drag & bezier curve

[jeremyp]

Hi,

 

I have two questions, i've already some kinds of solutions, but I would to know if you have some ideas about it : 

 

first, I would to know if I can easily combine drag and bezier : I mean, drag an object along a bezier curve using drag & bezier plugins?

 

My current idea is to create a timeline with my object animated along the curve, stop this animation, and control the timeline with a simple horyzontal drag in the bounds box of the curve. Do you see what I mean ?

 

Then, I would to be able to draw the curve ( dotted.. but it's another problem ), do you have any ideas of how I can convert my bezier coordinates to use canvas's method quadraticCurveTo() for example ?

 

Let me know if you have any suggestions, advices.. 

 

Thanks !

[Rodrigo]

Hi Jeremy and welcome to the GreenSock forums.

 

This codepen shows how you can translate the progress of a tween/timeline using Draggable:

 

See the Pen Batoc by rhernando (@rhernando) on CodePen

 

Then you can easily add the trigger property to the mix in order to use a parent bounding box to... well trigger the Draggable instance

 

See the Pen IiHgq?editors=001 by rhernando (@rhernando) on CodePen

 

Hopefully those codepens combined can come in handy.

 

Let us know if you need more assistance.

 

Rodrigo.

[jeremyp]

Hey, 

 

thanks a lot, it work perfectly, i've just made it on my project and it's cool!

And while doing that, I saw the method cubicToQuadratic for bezier, it will help me to draw my curve!

 

Thanks for the help!