[Is it possible to drag along a tween?]

That's exactly what I meant! Thanks for the fast reply!

[Items animated along bezier curves slow down at the end of the curve]

Ah, I put the ease inside the bezier definition! Haha, I spent 30 minutes trying to fix this without noticing! 

Thanks, that fixed it. 

[Is it possible to drag along a tween?]

Is it possible to drag so that the object's position is constrained by a tween? 

In effect this would something like changing the type from "x,y" to "mytween.progress()" - this is currently not possible, but is there a simple way to get a similar effect? 

My thoughts so far are getting the tween's target position in the onDrag function and explicitly setting the object's css top and left attributes there ( if I get this working I'll post a Codepen ), but I have a feeling this would be quite inefficient. 

[I made a Codepen tool to help visualize bezier curves]

Thanks! Although actually it's simpler than that, the points are stored in different arrays and it just switches between the arrays based on the selected curve type.

[Items animated along bezier curves slow down at the end of the curve]

When I'm animating along a bezier curve, the object being animated slows down towards the end of the curve - you can see this very clearly in the attached Codepen which draws a series of dot along the curve to visualize it.  The dots are more tightly clustered towards the end of the curve. 

Is there any way of changing this? I've tried changing the timeResolution but it doesn't fix this. 

See the Pen KdbqEp by looeee (@looeee) on CodePen

[I made a Codepen tool to help visualize bezier curves]

OK, I have changed it so that the object and the control points are draggable!

Unfortunately handles won't work here as the curves are auto-generated based on just the points. 

[I made a Codepen tool to help visualize bezier curves]

GSAP Bezier Curve Viewer

I've been working with bezier plugin quite a bit recently and made a tool to help visualize the curves as creating them blind is no fun! At its heart it's just this function, which should work to visualize any tween (uses jQuery):

let visualizeTweenMaxBezier = (tween, steps) => {
    for (let i = 0; i < steps; i++){

        tween.progress(i/steps);

	$("body").append("<div id='point" + i + "'></div>");

	$("#point"+i).css({
	    position: "absolute",
	    width: "2px",
	    height: "2px",
	    "background-color": "#7F7F7F",
	    top: tween.target.css("top"),
	    left: tween.target.css("left"),
	});
    }
    tween.restart();
}

Currently it generates code based on screen pixel values, if people are finding it useful though I might update it to generate code based on screen percentage, or percentage positions within the containing element. 

 

Happy coding!

 

See the Pen KdbqEp by looeee (@looeee) on CodePen