Search the Community
Showing results for tags 'bezier'.
Found 82 results
-
Hi! I don't know whether these are bugs or not, (or i just didn't get the concept of the BezierPlugin properly) As you see on the pen, if in the properties object i add props like (x, top, rotationXYZ) after the bezier: {'x', 'top', autoRotation: true}, those will be ignored. But if i switch them, the BezierPlugin will be ignore the properties which are defined before the bezier: {}. Ok, it's probably the correct behavior but it would be cool to be able to combine these values like x and xPercent:) But as you see on the third example of the pen, the rotation parameter will be ignored even if bezier: {autoRotation: false} as long as the bezier: {...} defined first. So this can be also solved by switching them but i like to be sure that i using these things properly.
-
Hey all! I've been doing a lot of animating along bezier curves and created a simple little helper tool/function that converts an SVG path into an array of cubic bezier points that can be plugged directly into GSAP Tweening functions. It's still missing a little functionality for quadratic and elliptical arc movements, but I haven't come across any issues with it yet converting SVGs saved out of Illustrator. Just thought I'd share in case anyone else finds it useful. http://github.com/mattanglin/svg-to-cubic-bezier I'll update to incorporate the other SVG movements (and cleanup the code. It's pretty quick and dirty at the moment...) as I have time. Any feedback welcomed. Thanks!
-
TweenMax.to player, len * 2, { bezier: { values: pathValues }, onUpdateParams: ["{self}"] onUpdate: (val) -> console.log val } If pathValues is an array [{x: 0, y: 80}, {x: 100, y: 200}] , is there a way to check which value in a path is a current bezier segment? I have a character that should follow a path and I need it to look forward one step in path, in order to change its animation texture. Here's a demo: http://iccthedral.github.io/2014/10/10/PIXI-ex1.html - Right click on a tile moves the knight (or whatever) to that position.
-
Hi, I have two questions, i've already some kinds of solutions, but I would to know if you have some ideas about it : first, I would to know if I can easily combine drag and bezier : I mean, drag an object along a bezier curve using drag & bezier plugins? My current idea is to create a timeline with my object animated along the curve, stop this animation, and control the timeline with a simple horyzontal drag in the bounds box of the curve. Do you see what I mean ? Then, I would to be able to draw the curve ( dotted.. but it's another problem ), do you have any ideas of how I can convert my bezier coordinates to use canvas's method quadraticCurveTo() for example ? Let me know if you have any suggestions, advices.. Thanks !
-
I'm new to green sock, but very well versed in Flash and ActionScript. I cannot for the life of my get an onComplete to work. Here is my code, maybe I have it in the wrong place?: function RedWineBounce04(event:TweenEvent):void { TweenMax.to(mcRedWines, tweenSpeedBounce, {bezier:{type:"quadratic", values:[{x:X_02_RedWines, y:Y_02_RedWines}, {x:(X_02_RedWines+BounceDistance), y:(Y_02_RedWines-BounceDisplacement)}, {x:(X_02_RedWines+125), y:Y_02_RedWines}], ease:Linear.easeNone, onComplete:MadeIt}}); X_02_RedWines = X_02_RedWines + 125; function MadeIt(event:TweenEvent):void { trace("Made It"); } }
-
I've created a few animations that run simultaneously along a bezier curve and stop at different points along the path by utilizing another Tween to control progress. Everything animates perfectly, but I keep getting the following error in my console: TypeError: a is undefined a._lazy = false; TweenMax.js (line 6097, col 6) Looking into the source it seems that this has something to do with the new "lazy" rendering feature released in 1.12.0 http://greensock.com/gsap-1-12-0 Any ideas as to what's going on here? Here is my code as it pertains to this issue (Only loading the TweenMax.js library): var trajectory_path = [ {x:0,y:0}, {x:0,y:-73.6},{x:-58.2,y:-133.2}, {x:-130,y:-133.2}, {x:-201.8,y:-133.2},{x:-260,y:-73.6}, {x:-260,y:0}, {x:-260,y:76},{x:-189.7,y:133.2}, {x:-117.9,y:133.2}, {x:-27,y:133.2},{x:58,y:51.6}, {x:58,y:-50}, {x:58,y:-151.6},{x:-13.7,y:-218.4}, {x:-100.6,y:-245.9}]; var rockets = $('.rocket'); var full_duration = 20; var full_progress = .9; var contest_progress = 1; // as float percentage rockets.each(function(i,rocket) { // Create tween on bezier curve var progress = parseFloat($(rocket).attr('data-progress')) * full_progress; // Get this from data attribute var duration = full_duration * contest_progress; // This should reflect the contest week and not the trajectory distance var t = TweenMax.to( rocket, full_duration, { bezier:{ type: 'cubic', values: trajectory_path, autoRotate: 90 }, paused:true, ease: Linear.easeNone, } ); // Animate TweenMax.to( t, duration, { progress: progress, ease: Linear.easeNone } ); });
-
Hi to all! my name is Patrizio, i have a question and hope find here a solution at my problem:) some year past have work to animation along bezier path in flash ... the anim figure a ship navigation. the page is here. now i want make a conversion of site frontend from flash to javascript. from cms data I get a path serie like this : path0= [{x: 530.1 , y: 115.7 }, {x: 538.65 , y: 119.35 }, {x: 536.8 , y: 126.6}, {x: 534.95, y: 133.9}, {x: 521, y: 135.45}]; path1= [{x: 519.9 , y: 135.55 }, {x: 523.1 , y: 144.4 }, {x: 523.6 , y: 154.5}, {x: 524.15, y: 164.65}, {x: 523.1, y: 174.05}]; path2= [{x: 523.25 , y: 174.7 }, {x: 494.9 , y: 179.9 }, {x: 470.8 , y: 240.25}, {x: 446.75, y: 300.6}, {x: 300.15, y: 211.1}]; path3= [{x: 300.15 , y: 210.65 }, {x: 275.55 , y: 215.85 }, {x: 244.25 , y: 225.2}, {x: 212.95, y: 234.55}, {x: 184.05, y: 247.05}]; path4= [{x: 183.05 , y: 247.1 }, {x: 135.45 , y: 246.6 }, {x: 118.1 , y: 252.05}, {x: 100.7, y: 257.55}, {x: 90.5, y: 278.35}]; path5= [{x: 90.7 , y: 278.95 }, {x: 104.6 , y: 268.55 }, {x: 107.55 , y: 265.4}, {x: 110.5, y: 262.3}, {x: 112.1, y: 260.2}]; path6= [{x: 111.4 , y: 261.55 }, {x: 105 , y: 254.25 }, {x: 184.7 , y: 235.8}, {x: 264.45, y: 217.35}, {x: 299.2, y: 211.6}]; path7= [{x: 299.5 , y: 211.65 }, {x: 434.3 , y: 300.05 }, {x: 463.2 , y: 247.75}, {x: 492.1, y: 195.5}, {x: 522.6, y: 174.7}]; path8= [{x: 522.3 , y: 174.75 }, {x: 534.6 , y: 165.4 }, {x: 539.15 , y: 144.3}, {x: 543.7, y: 123.25}, {x: 529.25, y: 115.95}]; In this forum i have find some example but not respond exactly how flash in the original work. maybe i'm wrong what's the optimal method for draw the bezier path like progressive animation drawing ??? someone can suggest me the right way ? sorry my poor english tnxxxx
-
How can I generate complex bezier curve points that follow a graphical path? I have tested the BezierPlugin demo SWF and it will work great for my project but I'm stuck calculating the points that match the image provided by the designer. I need to animate a div with an image background that tracks the graphical path. Will Photoshop, Illustrator, or Flash calculate the points from a graphic that can be used? Is there are third party tool? Attached is a graphical example for reference. Thanks in advance for your help.
-
Hello, Is it possible to use Bezier and transformAroundCenter plugins simultaneously?
-
Hi, As shown in the codepen, the issue I'm having is that whenever I finish dragging the object, the Bezier tween of that object stops, as both the Draggable and beziertween use Translate3D. While experimenting, I found that only x,y properties on both provide smooth animation and are not breaking the position of elements. Using margins or top/left positions renders bezier animation to be choppy, while using those types for Draggable causes the elements to be thrown off their initial positions. You can see the full-scale animation I'm working on at http://patmir.com. Using onDragEnd to re-initialize the bezier tweens returns the objects to their initial positions, which I want to avoid. The question is: What would be an appropriate solution here? I'd rather avoid having to re-initialize tweens and modyfing the tweens to use current position of elements, as it might decrease the site's performance significantly. Using different types for Daggable won't work, as the elements are positioned on top/left based on % and calc(). I would appreciate any insight into what I'm doing wrong here, With Best Regards, Patryk
-
Hi All, A rather strange situation: several tweens of the same object are added to a timeline to be played in a cubic bezier format. This objects is then dragged via Draggable. Then, in the 'onDragEnd' event the timeline to which the object had been added to is played starting from 0. I set a breakpoint after calling the play() function, and then make a call to TweenMax.getAllTweens(). The first time the object is dragged I see all the tweens that should have been on the timeline. However, after the 'onDragEnd' function ends, the browser steps into the code inside Draggable.min.js which continues on, and then if I make another call to TweenMax.getAllTweens() (while still in Draggable.min.js) then the tweens that were dragged no longer exist. What is no less odd is that if I drag the object again, play() is called again and works as if the tweens had not been removed, yet still TweenMax.getAllTweens() returns a list without the instances that had been dragged... Despite the fact that the removal of the tween happend inside Draggable.min.js, if I remove the call to the play() function from the 'onDragEnd' event handler, no tweens are removed... any clues?... Thanks ! Elior
-
Hi, First I want to say how impressed I am from GASP! My question is: How can I make a cubic bezier type rotate? In this codepen an object is animated on a bezier cubic path, where each leg of the path has it's own time length, color and size, but I cannot find a way to set the rotation. How can I do that?... I need a cubic type because I want a different timing for each leg, so I must first create the entire path via bezierThrough() and then animate each leg separately. Thanks, Elior.
-
I have a problem tweening and using progress on a bezier curve http://codepen.io/DuncanBudapest/pen/pxdgF I hope the codepen makes the situation clear. In the code the object 'steps' around the curve. As I understand progress represents the complete tween so any position can be represented by 0 to 1. In my example my total progress is 0.5 but the object tweens to 75% of the track. In the complete code there are multiple objects and there is some degree of control using the timeline. I've stripped the code down to make it easier to understand.
-
Hi, I urgently need a way to draw say dots along an entire path of a TimelineMax. The path does not need to animate. It just needs to be drawn initially. Can anyone point me in the right direction? ANy help appreciated. Sample timeline: //create timeline self.llnTimeline = new TimelineMax({ delay: 1, smoothChildTiming: true, timeResolution: 0, onUpdate: function() { } }); self.llnTimeline.seek(0); self.llnTimeline.add(TweenMax.to(self.llnPlane, 12, { left: 359, top: 998, ease: Linear.easeNone }), 0); // 1 self.llnTimeline.add(TweenMax.to(self.llnPlane, 12, { ease: Linear.easeNone, css: { bezier: { autoRotate: true, type: "thru", values: [{ left: 338, top: 1099 }, { left: 257, top: 1114 }, { left: 47, top: 945 }, ] } } }), 12); // 2 self.llnTimeline.add(TweenMax.to(self.llnPlane, 22, { ease: Linear.easeIn, css: { bezier: { autoRotate: true, type: "thru", values: [{ left: 27, top: 836 }, { left: 304, top: -573 }, { left: 379, top: -1045 }, ] } } }), 20); -
i am wondering if it is possible to use the BezierPlugin to create a curve that not only goes through a series of points, but will hit each of them at a defined amount of the way through the tween? using an array something like this: var tracker1Positions= [ {x:13.3, y:19.5, progress:0}, {x:14.8, y:19.0, progress:0.1}, {x:16.8, y:18.3, progress:0.7}, {x:19.0, y:17.9, progress:0.75}, {x:21.0, y:13.3, progress:1}, ]; my end goal here, is that i have a video that will have a some dom elements following certain items in the video, and i think a bezier curve would make a much smoother way to simulate tracking than just straight tweens. thank you.
-
I have an animation that uses the bezier plugin and the autoRotate function within it. After updating to the latest version of GSAP the rotation is no longer occurring, causing the animated element to look unnatural. I haven't run any significant tests as I am pressed for time with other projects but I was just wondering if there is a quick fix on my end. I know there were some updates to how rotation is handled in the latest update and if there is anything I need to do to update my code any assistance would be appreciated. Here is he snippet that makes the path and rotation: {bezier:{type:"soft", curviness:1.25, values:[{x:0, y:-200}, {x:300, y:-400}, {x:800, y:-200}, {x:1010, y:-300}], autoRotate:["x","y","rotation",1.5,true]} I can't provide the link to the source since it's a closed production environment but if it helps I can create a test page somewhere when I get some time. Thanks.
-
I just started to get into using the TweenMax JS animation library, and I have to say that it is pretty sweet. I've gone through and started doing test, and such, and tested the bezier plugin ,which is pretty awesome in itself. My question with the bezier plugin is whether or not it would handle responsive design, such as when the user rescales down their browser window? Currently I have this tween, that is set to animate when the item comes into view. var atween = TweenMax.to('.arrow-test', 2, { bezier:[ {left:100, top:250, alpha: 0}, {left:300, top:0, alpha: 0.5}, {left:500, top:400, alpha:1} ], ease:Power1.easeInOut, paused: true }); My CSS is as follows: .arrow-test-wrapper { position: relative; } .arrow-test { position: relative; top: 0; left: 0; } Does animating on bezier curves support responsive design? Or is there something that I am missing in my code? Thanks!
-
Hi folks, I'm having trouble with BezierPlugin, i've done a motion where i caught a bunch of blocks and tween all of then through different paths. When i'm tweening from left to right, everything works fine, but when i try to tween those blocks from right to left the autoRotate doesn't work. I'm not posting yet any example code just to see if anyone already had this problem and knows how to solve it. Anyway i will do a sample in codepen asap. That was fast, i've remembered a example that i saw at codepen and i've used it to reproduce the problem. Check it out, http://cdpn.io/zyxlb Thank you.
-
Hello, I've got an animation of some objects looping through a bezier using the BezierPlugin. I want to fire a function to make the objects stop with an ease, wherever they are but along the bezier curve. Imagine a racetrack and there's suddenly a red flag, all the cars need to come to a halt all of a sudden. How would I go about that? I tried overwriting the tween but it just stops. Another question as well on how the bezier the plugin draws, how can I make it not start drawing the bezier from x:0 y:0. Say I want it to start on the middle of the stage instead. Thanks!
-
Hi, I was wondering if there is any help out there to create a metaball effect with two 2D circles. I am using Raphael to create the 2D shapes. Is this something that needs to be done within Raphael? The effect I am going for is that there are a bunch of indicators moving vertically down a line at varying speeds. When they get close enough, I would like to animate them with a metaball effect so that the circles merge together and a number is displayed to show how many are in the cluster. Is there any help out there to construct something like this? The bezier plugin only does tweening "along a bezier path," if I am not mistaken - it won't do a shape tween using beziers?
-
Hi, is there any way to animate along SVG paths already? If not, can you recommend any tool that helps me get the bezier data from SVG, illustrator (or other) paths, so I can use them with GSAP? Thanks in advance
-
First of all I would like to thank you for creating GSAP for JS its simply Amazing! I was checking out : http://www.greensock.com/customease/ and thought it would be amazing to be able to do something like that in JS/HTML5, so I thought I'll ask. Mate it may sound a little off-topic but is there a way to maybe draw such a bezier curve in HTML5/Javascript? I want to ask a a animate an object along the bezier path. Is it possible to maybe do something like this, where user can edit the bezier curve? I hope I make sense, please pardon me if I don't as I am pretty new to JS/jQuery. Looking forward to hearing about it. Thanks in advance. Praney
-
Hello, I've an animation of 52 elements over a curve (a circle) using bezier. Elements come from a certain point and join the circle, 26 in one half of the circle, 26 in the other. autoRotate is set to true. Elements are rectangular. All 52 are clickable. After clicking any of the 52 they are moved to a different location. Problem is they preserve the angle of rotation they got following the curve. Question is how get the current angle of rotation in order to do the math and rotate to recover the initial angle (before going into the circle). Found here in the forums a solution but is not working: TweenMax.to(document.getElementById(identifier),0.5,{css:{top:"10px", left:"10px"}, ease:Power2.easeOut}); var transform = $("#card32")._gsTransform; var x = transform.x; var rotation = transform.rotationX; console.log(rotation); All I get is : Cannot read property 'x' of undefined Your help will be appreciated.
-
Hi I'm wondering why the autoRotate is not kicking in, when I use left and top values instead of x and y. The thing is, that with left and top I can absolutely define the position while with x and y I always have to calculate the offset to the next point. I've read somewhere in the Forum that there "was a regression in a recent version of BezierPlugin that caused autoRotate not to work properly". But I'm using the latest Version. Can you please have a look in my test.zip and tell me what I did wrong? Indyaner test.zip
-
Could someone help me to create a bezier animation like this I tried with this: TweenMax.to(moon, 10, {bezier:{type:"soft", values:[{x:100, y:100}, {x:200, y:100}, {x:100, y:311}], autoRotate:true}}); But: - I cannot adjust the path identically - I tried with plugin-explorer - there is no js code, just as. I tried that code - without success - The moon needs to be scaling 200% from start to the end point - z-index should be higher at the and. - How to adjust the pause between two sessions ? Any help, pls.
