Search the Community
Showing results for tags 'bezier'.
Found 82 results
-
Hi. I'm a Flash guy that's been dabbling in HTML5/Javascript stuff off and on for about a year now. Here's what I'm trying to accomplish: Eight circles of different colors animating in to form a ring (using a bezier curve) with the bottom circles overlapping the top ones (seen in circles.png) Once animated in to position, clicking on one of the circles will animate them until the clicked circle is at the bottom. The layers/zIndex will distribute correctly to match the original layout. I'm using TweenMax right now to animate the intro and it works pretty well. However, I'm using setTimeout to stop the animations so they stop when they get to the "correct" position to form the ring. This is a little finicky, as they will stop in slightly different positions each time. This leads to my first question: is there a better way stop the animations so the circles stop evenly along the ring? The other part of this is how I'm going about it. Eventually I'll want the animations to go back and forth simultaneously when you click a circle and i'm wondering: will this be done easily using functions of TweenMax like reverse or will TimelineMax be better for this situation? One last question... Here is some of my code: TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:{ curviness:1.5, values:[ {left:100, top:100}, {left:75, top:75}, {left:100, top:50} ] } }, ease:Linear.easeInOut } ); I use the bezier line a few times and I'm wondering if I can simplify it by doing something like: var bez1 = BezierPlugin.bezierThrough([{left:100, top:100}, {left:75, top:75}, {left:100, top:50}], 1.5); TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:bez1 }, ease:Linear.easeInOut } ); I'm submitting a zip file with my work so far. Let me know if you have any suggestions or questions about what I'm trying to do. Thanks! Test.zip
-
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.
