about bezier

[df257]

var tl=new TimelineMax();

tl.to(myDiv,5,{bezier:{curviness:1,values:[{left:100, top:250}, {left:300, top:0}],autoRotate:true}});

 

Bezier must see the animation to know the path,  could make bezier show in the browser?

 

[GreenSock]

Sorry, we don't offer a visualization tool like that. You could make your own with <canvas> or <svg> and just iterate over the tween (increase its progress() slightly each time) and draw lines. That's just one approach, but you could do it other ways too. But no, we don't have something that'll automatically draw a curve in the browser for you. If OSUblake sees this, however, I'm betting he'll point us to some wiz-bang codepen of his that does it

[OSUblake]

If OSUblake sees this, however, I'm betting he'll point us to some wiz-bang codepen of his that does it

 

Haha! You know me too well. Unfortunately, I don't have any CodePens that do this specifically... well, at least not with normal Beziers. It's not that complicated, and I've definitely thought about how to implement it. You can kind of see how this would work in this demo. Just click to add points and then press the log button. At the very bottom it will spit out the relevant GSAP Bezier code.

See the Pen wKGvVG?editors=0011 by osublake (@osublake) on CodePen

 

Look at this demo I made for a motion path...

See the Pen OyBGyV by osublake (@osublake) on CodePen

 

I did not use Illustrator to create that path. It literally took me like 45 seconds to make the SVG path using this...

See the Pen 3aca3bcec1bb3b8a9065059a5a7d7ebe?editors=0011 by osublake (@osublake) on CodePen

 

It also spits out the SVG code for a path. If you press the play button it will even show you the bezier animation!

 

Here's some other ways a tool like this could be used. These examples are from an old canvas library I used to use. Drag the handles around!

Demo 1 - http://hyperandroid.github.io/CAAT/documentation/demos/demo5/text-on-path_org.html

Demo 2 - http://hyperandroid.github.io/CAAT/documentation/demos/demo24/path.html

 

The only problem I have with making something like this is that I don't know how the Bezier plugin handles the "thru" and "soft" types. I've never bothered asking how they work because my focus has always been on cubic and quadratic Beziers.