bezier in javascript

Hi,

I wonder if we will have bezier support in javascript version soon? I had a great success with greensock and easelJs together, I can almost 100% duplicate what I have done with actionscript 3 before, apart from bezier curve animation...

Absolutely, beziers will be supported in the JS flavor. The challenge for me right now is that I have some ideas to IMPROVE upon the BezierPlugin (and it would affect several other things like motion paths and CustomEase) so I don't want to just port the older ActionScript version(s) over. But it will take some dedicated time to accomplish what I envision. The "quick & dirty" way would be to just port the existing code, but I prefer to keep refining and improving things as we go. Unfortunately that's gonna take some patience from dedicated users like yourself (my apologies).

There are so many exciting things I'm anxious to get to in JS and this is definitely on the list.

Thanks very much for your reply! Is it possible to have a rough schedule about when we bezierPlugin will be available for js?

I understand it will take time, however, if it's going to be long, is it possible to have a way to use the "quick & dirty" old AS port? I really wish we could have bezier in JS, it'd be awesome!

There isn't a specific schedule that would allow me to guarantee a delivery date, no. Sorry But after I return from the Reasons to be Creative conference I very well may crank out the "quick and dirty" option you requested. Stay tuned...

+1 from me Jack, that feature would be a huge game changer!

Hey Jack,

Awesome job on the JS port - I'm still blown away by the blistering performance of the engine

I too would love to see this feature/plugin introduced ASAP, since I'm putting together a pretty complex timeline animation that would benefit from some bezier love.

If it offers any motivation, the project in question is a showcase of my Axonometric Projection Engine working in harmony with your GS12 JS Tweening Engine (both of which are being linked too from the demo).

I'm really excited about this one, and can't wait to let it out into the wild.

Kind Regards,

Matt

Hey Jack,

Any idea when you will be able to have a stab at this plugin?

Thanks,

Matt

I'd really like to have something by early next week, but I can't guarantee that. Sorry. Trust me, this is a very high priority for me too.

Came here to ask the same thing. I'm a Flash developer thats just recently moved onto HTML ad's. Currently working on a new project and this would be be a life saver.

I have good news and bad news. First the bad news: despite investing many hours in reworking the Bezier system, it is very unlikely that it will be ready by next week, particularly because I'll be traveling.

The good news is that I have made headway and figured out an algorithm that will result in better, smoother Beziers through the points that you provide. Plus there will be a "curviness" parameter that allows you to control the strength of the curves through points. I'm basically rebuilding the Bezier support from the ground up in the engine, using cubic Beziers rather than quadratic Beziers because they provide a lot more control and flexibility. Like I said, I really didn't want to burn time just porting the old system over to JS because I had all these ideas for improvements that will ultimately serve you better and if I do the "quick and dirty" port, it'll be frustrating for everyone because the syntax would be different than the one that ultimately replaces it, creating confusion and potentially breaking any code you write for the "old/quick/dirty" port when the new one is released in a matter of weeks.

In summary, I think you'll really like the new Bezier stuff but you'll need to wait a bit for it.

In the mean time, I would like to know what specifically you're wanting to do with Beziers in your project(s), just so that I can make sure it is well supported. For example, are you trying to tween canvas elements along a path? Are you wanting to tween DOM elements' css properties (maybe transforms like x and y or left and top)? Are you wanting to throw raw Bezier data at the engine (with control points) or do you need the bezierThrough functionality where you throw points at the engine and it plots the Beziers for you? Can you write a few sample tweens that show what you're trying to do? And of course if you have feature requests related to Plugins, let me know. The more info you can provide, the better.

Thanks for your patience.

For me its "throw points in the engine and draw lines along the path".
Btw that thing about controlling the curviness I think its amazing to have.

Thanks and waiting patiently for this and throwProps.

Fantastic news! Very excited to see and play with this plugin as soon as it is ready!

To answer your question, flexibility and options are what I have always loved about TweenMax. I have used both bezier and bezierThrough more times than I can count and found them both to be incredibly useful in different situations. The 'curviness' functionality sounds very interesting and would certainly augment the possibilities of what can be done using your platform.

My current requirements are simply to modify native Object properties, since I am handling updates to the DOM from within my program. However, it would be great to eventually see CSS integration for manipulating DOM elements directly at some point in the future.

I never had any issues with the syntax of an Array of Objects for both bezier and bezierThrough, but if you have any better or alternative ideas for how beziers should be defined, I would love to hear them and would be more than happy to offer my opinion.

Again, thank you for all your dedication and hard work.

Can't be happier to know JS version will have bezier!

We use quite a lot of bezier curves to create animations for games. Basically, simple tweens with a few bezier points to move things in curve rather than straightly from x to y.

Its too bad that we can't do it in JS as we are converting many Flash games into HTML5. Our current work around is to have a few points tween in a timeline to simulate a beizer curve, of course, it's not as good and dirty, but at least, it gets the job done.

Yep, I've been working hard on the Bezier stuff for weeks and it is coming along nicely. I think you'll really like it. The plugin will accommodate not only quadratic Beziers but also Cubic ones and of course it'll support plotting Beziers directly through the values you provide (so that you don't have to mess with figuring out control points if you don't want to). And when you use the "through" mode, you'll be able to control the curviness of the Bezier. I'm also working on enabling a mode that will figure out the lengths of the segments and ensure that easing along them is handled proportionally (something the old system didn't do). Obviously this is no trivial task to bake all this stuff in and optimize it, but I really hope to have something for you to look at within the next week or two. Stand by...

I have good news: I just posted the first crack at the BezierPlugin which is also integrated with CSSPlugin, so you should be able to not only do regular Bezier tweening on any generic objects, but also css-related properties as well. Download the latest JavaScript zip and you'll see the plugin (it's also integrated into the TweenMax file, so you don't need to load it separately if you're using TweenMax).

Read the docs at: http://api.greensock...zierPlugin.html

If you've used the BezierPlugin in the Flash version, you should notice that this new one is far more capable in many ways:

• The algorithm it uses for drawing Beziers through points is much better (more natural) and more flexible (you even can define a "curviness" value)
• It has a timeResolution parameter that virtually eliminates the problem that plagues most Bezier animation tools - uneven movement on the Bezier based on the control points and lengths. For example, in the old system if you constructed a Bezier that had multiple segments that were vastly different in length, the object would move much faster on one segment than the other. And on an individual curve, the pace could change too. Not anymore.
• You can define straight-up Cubic Bezier data or Quadratic Bezier data. You can even use the BezierPlugin's bezierThrough() method to parse your point data and have it spit back to you the Bezier data that it drew through those points. You can get it back in either cubic or quadratic format so that you could, for example, use the canvas drawing API to draw the path. Very flexible.
• The autoRotate (previously called "orientToBezier") functionality has been improved so that it is even more precise and more quickly calculated. Yes, you can animate regular dom elements along a Bezier path and have its rotation follow the path's. Even seems to work in older versions of IE!

I'd love to have you guys hammer away at this and let me know what you think. If you have suggestions for improvements to the API, I'm all ears. I'd also love it if you could post some samples of what you're doing with it.

Thanks for your patience. This plugin took an insane number of hours to construct, but I'm pretty happy with how it is turning out.

Happy tweening!

Its summer here, but feels like Christmas!

Hi,

I've just download the v12 JS from the website, I think it's the latest one as it includes the BezierPlugin.

Code:

The following line works fine:
TweenMax.to(obj,1,{ bezier: {values:[{x:907, y:555}, {x:244, y:524}]}});

However,this line does not:
TweenMax.to(obj,1,{ bezier: {values:[{x:907, y:555}, {x:244, y:524}], autoRotate:true}});

Firebugs gives the following error:
this._beziers[b[e][0]] is undefined At TweenMax.min.js (line 16)

And did you download the latest version and try? The version that was up Saturday through Monday morning had that issue, but it should have been resolved in the latest one.

Everything works fine! Thanks very much!

Excellent, thanks for letting us know. Don't forget to post some samples of what you're doing (if you don't mind). We'd love to see it in action.