Search the Community
Showing results for tags 'bezier'.
Found 81 results
-
Hi there, I'm having some trouble with css object. I want to move an image along a bezier curve. I create the image like this: img = new Image(); img.src = "car.png"; img.xpos=275; img.ypos=350; And then I try to move it along the bezier curve in canvas. In the function "loop" I draw the image continuesly. Here is the code for the bezier: ctx = document.getElementById("can").getContext("2d"); TweenLite.ticker.addEventListener("tick",loop); TweenMax.to(img, 4, {css:{bezier:{values:[{xpos:100, ypos:250}, {xpos:300, ypos:0}, {xpos:500, ypos:400}], autoRotate:true}}, ease:Power1.easeInOut}); But it does nothing. When I remove the css object and also autoRotate attribute it works. The working version of that line is here: TweenMax.to(img, 4, {bezier:{values:[{xpos:100, ypos:250}, {xpos:300, ypos:0}, {xpos:500, ypos:400}]}, ease:Power1.easeInOut}); I don't know how to fix it because if I try this with an <img> element it goes well also the first way. Could you somehow tell me where I made a mistake? I need to do this with an image created during process because I draw the images in canvas. Not just like this:<img src="car.png"> Thanks
-
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...
-
Adding autorotate to my bezier curve stops it from working in Safari (5.1.7) It just pins around in one spot and doesn't follow the curve. Removing the auto rotate parameter fixes it. Anyone any ideas?! Can't find anyone with this problem and not sure what to do about it, I really need it to auto rotate with the curve. Works in all other browsers! var anim = new TimelineMax(); anim.append(TweenMax.to($('#anim'), 2, {css:{bezier: {values: [{left:'3578px', top:'2417px'},{left:'3431px', top:'2362px'},{left:'3190px', top:'2252px'}], autoRotate: true}}, ease: Linear.easeNone}));
-
Hi all, I am after an explanation/confirmation if the following is expected behaviour http://jsfiddle.net/4GeQe/7/ First run - fine - works as expected Second run - uses it's existing position as base co-ordinates, then just goes haywire. Shouldnt this end up in the same place at the end as it did in the first run? Regards
-
Hi, I'm using the latest version for AS3 (greensock-v12-as3) in Flash Pro CS6 with a Shockingly Green membership. I'd like to save a bezierThrough tween in a var, so that I can reverse it later on, but I only know how to use bezierThrough by calling the TweenMax.to or TweenMax.from methods, so don't know how to instantiate a bezierThrough. I'd like to use this syntax: "var myTween:TweenMax = new TweenMax(-mybezierThrough tween-);" but how to do it when bezierThrough syntax is: TweenMax.to(mc, 3, {bezierThrough:[{x:300, y:345}], orientToBezier:true, ease:Bounce.easeOut}); Thanks, Carin
-
Hey all. I've been playing around with TweenMax, and I was curious of something. I really like the functionality demonstration available on the site - the ones that showcases all the Greensock Tweenmax features, particularly the one that lets you move around the bezier curves via an interface. I was wondering if something like that is available, but in another resolution? I'd love to use a program like that for prototyping some animations, but at different (particularly larger) resolutions. I've got some complicated paths in mind, but it's hard for me to mentally work out what the x/y coordinates of the points should be - whereas the Tweenmax plugin tool does a lot of the work for you. (Arrange the points/curves as necessary, and here's the as3 code used, complete with coordinates.) Anyone got advice here? And of course, my thanks to the creator for making such a useful tool. Thanks in advance.
