Search the Community
Showing results for tags 'visualize'.
Found 1 result
-
GSAP Bezier Curve ViewerI'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!
- 4 replies
-
- 1
-
-
- bezierplugin
- tweenmax
- (and 5 more)
