Search the Community
Showing results for tags 'bezier'.
-
Hi everyone. I'm attempting to animate a block of text from straight horizontal line to an arc that would be a part of a circle. Here is the design that I have in mind: At first, I tried to use sine, cosine to calculate the horizontal and vertical distance that each character has to move to reach the arc. The problem with this approach is that I have to set `position: absolute` to each character. As a result, my attempt looks nothing like what I have in mind, with each character radiates from the center point of the imaginary circle instead of organically moving from horizontal line to the arc. So I'm rethinking: Maybe I should scratch that and try to animate a straight line to a Bezier curve using SVG, then place the characters on the curve to make them look like they are waving from straight line to curve. What do you think? Any pointer would be highly appreciated.
-
Note: This plugin was replaced with MotionPathPlugin in GSAP 3. Please see the GSAP 3 release notes for details. Animate virtually any property (or properties) along a curved Bezier path which you define as an array of points/values that can be interpreted 4 different ways (described as the Bezier's "type", like type:"soft"? "thru" (the default) - the plugin figures out how to draw the Bezier naturally through the supplied values using a proprietary algorithm. The values you provide in the array are essentially treated as anchors on the Bezier and the plugin calculates the control points. The target's current/starting values are used as the initial anchor. You can define a curviness special property that allows you to adjust the tension on the Bezier where 0 has no curviness (straight lines), 1 is normal curviness, 2 is twice the normal curviness, etc. Since "thru" is the default Bezier type, you don't need to define a type at all if this is the one you want. "soft" - the values that you provide in the array act almost like magnets that attract the curve towards them, but the Bezier doesn't typically travel through them. They are treated as control points on a Quadratic Bezier and the plugin creates the necessary intermediate anchors. The target's current/starting values are used as the initial anchor. "quadratic" - allows you to define standard Quadratic Bezier data (Quadratic Beziers have 1 control point between each anchor). The array should start with the first anchor, then control point, then anchor, control point, etc. for as many iterations as you want, but obviously make sure that it starts and ends with anchors. "cubic" - allows you to define standard Cubic Bezier data (Cubic Beziers have 2 control points between each anchor). The array should start with the first anchor, then 2 control points, then anchor, 2 control points, anchor, etc. for as many iterations as you want, but obviously make sure that it starts and ends with anchors. For full details please consult the BezierPlugin documentation. -
Hi everyone, I have a simple problem to solve ( I'm sure that's something dum ): I have some points as bezier curve, and I'm animating a Svg along that path. This is the code: let flyMove = new TimelineMax({ ease: Linear.easeNone, repeat: -1, paused: true }); flyMove.to("#" + id, 12, { ease: Linear.easeNone, bezier: { values: [ { x: startPointX, y: startPointY }, { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) }, { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) }, { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) }, { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) }, { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) }, { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) }, { x: startPointX, y: startPointY } ] } }); I'm trying to figure it out why the svg doesn't start again at the same point: can you help me? Thanks in advance, Simone
-
Alright Guys, I have a little challenge / question for you. I really want to be able to get SVG path d attribute data into a format that BezierPlugin can use. So given this string M0,0c0,0,14,184,157,184V86h173c0,0,105-3,105,93, I'd want either an array of all the x/y values of all the anchor and control points like [0,0,0,0,14,184,157,184,157,184,157,86,157,86,157,86,330,86,330,86,330,86,435,83,435,179] or an array of point objects (which ultimately would get passed to BezierPlugin) [{x:0, y:0},{x:0, y:0},{x:14, y:184},{x:157, y:184},{x:157, y:184},{x:157, y:86},{x:157, y:86},{x:157, y:86},{x:330, y:86},{x:330, y:86},{x:330, y:86},{x:435, y:83},{x:435, y:179}] The end goal is draw a continuous path in Illustrator, smack svg output into an html page, use the svg path for a Bezier tween. This video explains all this in glorious detail: Does raphael, or snapSVG or any other library offer a convenient conversion method? It seems that since the same curves can be represented each way it should be easy to convert 1 format to the other, right? I'm not looking to have a robust tool built that analyzes svgs and builds animations automatically, just a function that I can do convertPath(dPath) { ... //turn dPath string into an Array of anchor and control points return BezierPointData } //usage var bezierAnchorAndControlPoints = convertPath("M0,0c0,0,14,184,157,184V86h173c0,0,105-3,105,93"); Any help is greatly appreciated. Carl p.s: This mission was greatly inspired by Chris Gannon's DrawScript converter: http://gannon.tv/drawscript-to-gsap/ and I'd like to publicly thank Rodrigo for helping me get a good leap into Raphael.
-
I'm new to GS, so apologies for any poorly described things...I'm facing two issues. I'm trying to have circles move according to specific data I have for each circle, and I first tried to move an svg along a path like in this codepen by Sarah Drasner https://codepen.io/sdras/pen/aOZOwj, but there are instances where the circles should appear to stop momentarily but even when the data roughly repeats itself multiple times (they'll be different by 1-2), it doesn't seem to have any effect. (I'm not sure if it's visible from my codepen, but even when I tried manipulating the path points in Drasner's codepen, I wasnt able to create a pause). Consider that each data point represents an evenly spaced moment in time (like frames of a video), and I want the circle to hover for the equivalent amount of time that the data represents out of the total. eg one frame is 40 ms apart, so 10 frames of repeated data should mean that the circle is stationary/"moving to the same place" for 400 ms. I gave up on this method to try and tried the method in this example where I specify the duration/location of the movement for each data point, but cannot get it to work move at all. I'm not sure if it's because the sample rate is too fast, but I can't find anything about max/min durations for the .to. In both scenarios, I get this error Uncaught TypeError: Cannot assign to read only property 'cy' of object '#<SVGCircleElement>', but using the bezier method still works, so I just ignored it, but with the new method, it doesn't work and I haven't found anything anywhere about what this error means because I'm selecting the circle... In my codepen, I have a button for each method where you can see the error in the browser console but not the codepen console. https://codepen.io/azhao/full/bJVJxZ -
I know the PathEditor is undocumented and unsupported so this isn't a question regarding its use. The reason it is used is because I'm trying to use its onUpdate callback to update the position of the animated element (image in the codepen) as a path node is dragged. For example, if I drag the right-most node to the left (in the codepen), the plane should move to the left as it follows the change in the path's position change. Is there a ready-to-use function in GSAP to make this happen?
-
I am trying to have a bezier connector between two draggable divs. I have used the code made by OUSblake at this codepen. So I can make it work, more or less. Draggable works? Check. Autoscroll works? Check. I can draw a bezier between my draggables? Check. The problem happens when I drag either of the the Things to make the area Autoscroll. The bezier seems to forget that it was attached to the divs. When I scroll back so that both of them are in view the bezier re-connects - sort of. The connection is apparently very loose because it breaks when you scroll the window with a mouse wheel or by using the scrollbar as well as when you scroll while dragging. Editing this post again! I just realized that the script only updates the curve onDrag! That means it does not update when scrolling is happening. Wondering now how to approach that. Really, Autoscroll is not what I originally wanted. I want draggable on the divs so they can be moved.. But I wanted to also make the Playground pan and zoom. So instead of scrolling by dragging only also pan and zoom the area like in a maps application. Eventually, I want to take this proto-type and use it to create a content rich kind of "flow-chart". Basically, think of Thing 1 and Thing 2 both being filled with content - text, images etc. All of it will be added via DOM manipulation when buttons in an accordion menu are clicked. Let's say that I open the menu and click on Thing 1. it opens and is draggable and filled with content. On thing 1 is button that says "Thing 2". Click it and Thing 2 will open next to Thing 1 with a bezier connector between them. You can think of it as a simplified version of a node editor. I don't need for the user to be able to drag and drop the connectors between blocks. I also don't need to have the user delete or cut the connectors. (both of them are typically feature of node editors but not necessary for my design.) So, anyway, that is the goal. None of that will work if I can't figure out how to stop these things from losing the connection with the curve when you autoscroll. Any help and suggestions will be appreciated!
-
Hi, I know how to move a element along a path but how to add another element at 50% of this path (and do the same loop). 1/ create another path with a split point in svg software ? 2/ make a array manipulation on bezier variable ? 3/ deal with timeline ? 4/ or there is another option ?
-
Hi, I have a path with a circle going along it using MorphSVG with Bezier. When you press 'play', the circle follows the path to the end as expected. However, I want the circle to stop at the top of the curved line, so like 70% along the path. Is this possible? https://codepen.io/Carrly/pen/vpwBEW
-
Hi, fellow GreenSock (forum) members. I'm stuck with animating an object over path, more like generally how to center say rectangle or any path to move smoothly on a path with autorotating. The Codepen pen is a part from what I would like to do but can't center the green "car" e.g. so that its center (midpoint X and Y or centroid if you wish) would move on the path. This year I have created complex animation of a cube moving along the "infinite" path with calculating shadows per rotation angle - with callback function - yet cannot do this simple animation well. Gray path is a rectangle, red one is nearly completed rounded rectangle with Bezier curves. The latter would be perfect but I cannot script the green rectangle to be centered on path at all times. So in general how to draw, position and/or offset an object so that it will move along the path by its center (centroid)? Having a group with invisible rectangle boundaries and then animating a group along the path? And yes, I have watched the excellent Note: I'm using svg.js for some easy creation of SVG elements. Intention is to script all to have rule base path creation and then animating objects over paths. Sure, the path rounded corners will be redone with arc commands :-).
-
hi is anyone one know how to animate text on a curve path, i've attached a snap shot. can you please advice me to get this thing done.
-
I'm plotting a bezier path for a car to drive around using scrollmagic, I'm finding it difficult to visualize the path i need to do for the bezier animation - is there a way to visually show the path during development so i can debug it?
-
Hello everyone ! I'm having a problem with the perfect looping of the leaves. This should play like : we see factory > the leaves gently show from opacity 0 up to 1 while traveling along the path > before the end of path they should slowly go to opacity 0 > the leaves gently show from opacity 0 up to 1 while traveling along the path > before the end of path they should slowly go to opacity 0 and so on and so on. I managed to do some crazy workaround that almost works, but the opacity jumps to 1 after repeat as shown in the pen. This looks like I'm missing something very basic here - if you guys know how to deal with this ANY help will be a huge help wish you a lovely day ! PS <g id="leaves">
-
Okay I'm fairly new to GSAP but I think I've found a bug. Maybe I'm using something wrong or maybe it's a bug. Whatever it is I wanted to just highlight it to the GSAP experts incase it really is a bug and not me using the animation library incorrectly. First and foremost I should Tell you that I've tested the codepen animation on ALL major browsers. The animation works correctly on IE, Edge, Chrome, Various Mobile Browsers. The only browser that doesn't render the animation correctly is Firefox. I'm using the latest version of Firefox by the way. Okay so the bug I'm referring to is the various "Eyes" that are following a path (I've highlighted the path for your convenience). The eyes are not following the path correctly on Firefox. What I wanted was to make the eyes appear from one mobile and go into the other mobile. This is happening on all browsers except firefox. I apologize for the long SVG code. The two paths I'm using for this are found at the very bottom of the svg code. One path for the "dollars" and the other for the "eyes". The relevant javascript code for this is from line 1 to line 16. Thanks!
-
This looks so simple but I just can't figure out what the problem is. I'm creating a bezierPlugin demo and use an array of point objects both to define the bezier path and to distribute visual guides. TweenMax throws an error `invalid css tween value: [object Object]` like the objects aren't valid, but everything looks fine to me. The loop and pen works fine with any hardcoded object such as `{ x: 100, y: 100 }`. Why is the referenced object invalid in the `TweenMax.set()`? // Create dots and distribute them along the bezier path for (var i=0; i<6; i++) { var blueDot = new Dot(container); blueDot.target.className = "blue-dot"; //TweenMax.set(blueDot.target, pointObjects[i]); console.log(pointObjects[i]); // Looks like a valid object to me } Un-comment line 38 and see it break. Many thanks! -
Bezier autoRotate Problem - Image not middle centered along path
Technics1210 posted a topic in GSAP
Hi, i am using the "pathDataToBezier" function to follow an image (car) along an SVG path. When not using the autoRotate function (false) - the top left corner of the image is right on the path / track , but when i am using the autoRotate function "true" - the image is not x/y centered in the middle of the path and have some weird offset in the curved areas. // animate road var path = MorphSVGPlugin.pathDataToBezier("#roadPath"); TweenMax.to("#car", 5, {bezier:{values:path, type:"cubic", autoRotate:true}, ease:Linear.easeNone, repeat:-1}); the image is a 22x10px image, which should rotate in the middle / center of the image along the path... What do I have to change? Have a look at http://codepen.io/technics1210/pen/vmxdLz?editors=1111 -
TimelineMax and Bezier plugin have such amazing possibilities, but I am a bit stuck with a few things I don't understand. On this example, The things that don't make sense to me. 1) I did not know how to determine the starting point for the bezier circle. By default, it was starting in the bottom left, and so I rotated the entire svg, and then rotated negatively the play arrow to get it back to a normal starting point. This hack is fine but I am almost 100% sure it is going to cause me issues and may already be. Is there a way to determine the beginning of a bezier curve that allows me to place the object I am rotating around it at a particular starting point? 2) The animation works great if I use TweenMax and just animate it like a normal tween. But when i create it as a TimelineMax animation that occurs on hover it starts way off the bezier curve, I'm assuming it is where it should have started in the first place before i rotated it and all of that. Once you hover over it, it jumps right on the path. Is there a way to snap it to its starting point while TimelineMax is paused? This may be the same question as 1... 3) Is there a way, besides breaking it in 2 bezier curves to have the hover animation stop in the middle of its bezier curve trip? I would prefer to have the animation pause in the middle and then on mouseout, complete the rest of the animation. But I don't see a way to have a bezier animation stop before it gets to the end. Any thoughts would be appreciated!
-
Hi, I try to move a Google Map marker along a Bezier Curve using TweenMax and its bezier property. However Google Map Marker has only setPosition method to update position. How can I feed the bezier property (see below) ? Thanks for your help var marker = new google.maps.Marker(); var bezier = new TweenMax(marker, 6, { bezier:{ type:"soft", values:???? }, ease:Linear.easeNone} );
-
Hey – is there a possibility to get a specific value from the BezierPlugin like this: var bezier = BezierPlugin.bezierThrough([{x,y}], curviness, ...); var value = bezier.getValue(progress) // progress is between 0 and 1 console.log(value.x); console.log(value.y); Best regards
-
Hi, i'm trying to get tweenmax bezier tween fit with a canvas quadraticCurve. The canvas QuadraticCurve is supposed to draw the trajectory of a tweening object. That curve datas are given by BezierPlugin.bezierThrough So far, start and end point seems to fit, but the canvas bezier curve middle point is higher than the tween bezier curve. Could please someone help me understand what i'm doing wrong?
-
I think I can live with that solution, but just out of curiosity - is there a way to make this animation work, without wraping everything in #border div? I thought you can have some object, that would a pivot point for other objects, but apparently not.
-
How do I use bezier to go somewhere via x should be = % instead of px ? **I have a responsive background where the image should also curve to the same target when scaled I tried using xPercent / yPercent which do not work in bezier TweenMax.to(document.getElementById("image"), 1, { bezier: { curviness: 1.5, values: [{ x: 60, y: 50 }, { x: 140, y: 0 }], ease: Power2.easeInOut, rotation: 260 });
-
This is not as much a "having a problem with.." issue as it is a best practice question. Might even be an SVG gotcha. The codepen shows attaching a drawing tool (like a pencil or whatever) to a drawSVG line drawing by using MorphSVGPlugin.pathDataToBezier and following drawSVG. Got it working pretty quickly but when I started testing a few SVGs, I ran into compound paths - where there were multiple M's in a single path creating separate visual lines. When drawSVG runs by itself (with no visual pen image following along) it's not noticeable that compound move-to paths are drawing multiple lines in at the same time. But, when you're trying to make it look like a pen is drawing a line at a time it quickly falls apart visually. So, I wrote a rather ugly function to check for and break apart compound paths and then replace them all. function breakApartPaths(paths, svg) { var sepPaths = []; for ( let path of paths ) { var pdata = path.getAttribute('d'); pdata = pdata.trim(); var subArr = pdata.split('M'); for ( let M of subArr ) { if(M != "") { var newPath = document.createElementNS("http://www.w3.org/2000/svg", 'path'); for ( var a = 0; a < path.attributes.length; a++ ) { var N = path.attributes[a].name; var V = path.attributes[a].value; if(N != 'd') { newPath.setAttributeNS('',N,V); } } newPath.setAttributeNS('','d',`M${M}`); sepPaths.push(newPath); } } } return sepPaths; } I get the sepPaths array, and then remove all the paths, replacing them with the new paths like this... var paths = document.querySelectorAll(`${svgID} path`); var newPaths = breakApartPaths(paths,$(svgID)[0]); for( path of paths ) { $(svgID)[0].removeChild(path); } for( path of newPaths ) { $(svgID)[0].appendChild(path); } It works but feels a little dangerous. Anyone know a little safer, more DRY way to do this?
-
Hi All, I'm tweening an object using bezier values. I'd like to send the current quadratic data out via onUpdateParams but can't seem to figure out an easy way to do it. I guess I'm looking for something like this: var points = [{x:100, y:50}, {x:150, y:100}, {x:200, y:50}, {x:350, y:350}]; tl.to( point, 3, {bezier:{values:points, type:"thru", curviness:2}, ease:Expo.easeOut, onUpdate: myFunction, onUpdateParams:["current x:a,b,c,d and current y:a,b,c,d"]}); Obviously not correct, but hopefully explains what I'm hoping to achieve. I've seen a bunch of examples that use a tween in combination with a loop to traverse a bezierThrough array, but that just seems way more complex. Any thoughts are appreciated. Thanks! -BK
