I made a Codepen tool to help visualize bezier curves

[looeee 2 Likes (Newbie)]

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

[pixeldroid 27 Likes (Newbie)]

That is cool.  How about draggable handles and anchor points?

[looeee 2 Likes (Newbie)]

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. 

[pixeldroid 27 Likes (Newbie)]

I'm impressed!  The points change when the curve type is changed.  Is that because of the math?

Thanks for a great tool!

[looeee 2 Likes (Newbie)]

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.