Search the Community
Showing results for tags 'bezierplugin'.
Found 28 results
-
I'm converting a project using gsap 2 to gsap 3. BezierPlugin.bezierThrough() is used, but I don't see a compatible method in the MotionPathPlugin. What would I use to replace that function?
-
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.
-
-
Is it possible to animate object's anchors by BezierPlugin with certain curve data ? I understand that BezierPlugin can animate object along with a bezier path, what I'm trying to do here is animating the position and anchor at the same time.
-
To give a quick summary, I want to be able to set the progress/time at which a bezier path will hit each anchor point while keeping both the path and speed/progress smooth, i.e.: var bezier_path = [ {x:0, y:0, progress:0}, {x:0, y:80, progress:0.1}, {x:80, y:80, progress:0.5}, {x:80, y:0, progress:0.6}, {x:0, y:0, progress:1} ]; Essentially what I'm trying to do is the same as @danehansenfrom 2013 if it gives you any inspiration: As you can see in the CodePen, the main method I've tried is correlating the x, y, and progress properties of a bezier tween. The x and y properties tween the moving element and the progress property tweens the parent timeline. Unfortunately it appears that including x and y values in the timeline tween breaks the tween. Hence, I've played with BezierPlugin.bezierThrough to calculate the correlated bezier and then seperate the object properties out for the element and timeline tweens. Unfortunately, TimelineMax.to() with bezier:{} doesn't accept this form of input. I've thought about using CustomEases but unless I know at at what time/progress a bezier anchor point will be reached this is not possible.
-
I am getting a strange problem, i am animating a simple DIV along a Bezier path using scrollmagic. Everything is working fine, however when i reach the end of the animation, The pinned element which it is in, does a big jump. I have troubleshooted for hours and tied it down to the transition of when the animation is running it is using Translate3D property, then when it finishes, it quickly jumps to matrix property. It would appear that this switch in properties causes my page to jump. Is there anyway to stop the matrix property being applied, because the object stays where it is supposed to if i use translate3d to the last coordinates of the animation.
-
Hello! I've been looking into creating an effect that I see a lot of modern websites using. Im not sure if im meant to be using scrollmagic or not but it seems like quite a good library to plugin to gsap. Here's an example of the effect that I am trying to create http://lamoulade.com/#!/home The website above displays items on the webpage while you scroll. I am looking at creating something similar. I thought the best place to start was to create a bezier curve, and have it only animate along the curve while I scroll - the only problem is, I have NO idea where to start. Should I be looking at ScrollMagic's 'pinning' of objects and have them set to containers? Not sure. Thanks in advance to anyone that posts any information on this topic. Cheers!
-
Hi, I am trying to animate a shape along a motionpath bezier. In my codepen have taken it back to basics with a line and a square. Whenever I switch autorotate to true, the square just does not stay centred on the line. Turn autorotate to false and it sticks beautifully. But I need that auto rotation goodness. I have been using the demo from https://greensock.com/docs/Plugins/MorphSVGPlugin 'Animate along an SVG path' for the basis of the animation.
-
Hi everyone, I'm trying to animate some objects (arrow heads) along the path of the arrow itself. CodePen attached. I'm attempting to use the BezierPlugin to achieve this, but transforms are being applied to the position of the arrow heads in a strange way. I'm sure there is a straightforward solution to this, but I can't seem to figure it out! Many thanks for any help provided, as always!
-
when using `BezierPlugin` to tween something along a bezier curve, you are able to add a `type` of values `thru`, `soft`, `quadratic`, or `cubic`. is there a way to get a curve of similar results when getting bezier objects from `BezierPlugin.bezierThrough`? i understand that there is the `curviness` argument, but i would really like to apply `soft` to my data i am getting back. thanks.
-
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 try to make marker jumping from button to button in navbar. But don't know why my bezier path acting weird. What am I doing wrong? How to make it go to half distance between buttons and up, like in karaoke for example?
-
Hello, I'm new to GSAP. I have done a few tutorials on Tweenmax and I have basic understanding of GSAP. However, I am struggling with GSAP integration with VisJs library. GOAL: I am trying to visualise network traffic between hosts using VisJs. I would like to animate the connections between hosts using GSAP. Please have a look at static visualisation here: http://legendary-broccoli.azurewebsites.net/Home/VisJs. The lines between nodes represent a connection and I would like to animate the diagram when a new connection is added or old one is removed. For example, if there is a new connection from 172.10.1.10 to 172.10.0.6, I would like to start drawing a line from a source host to a destination node. Current tool: To draw Bezier curves between the nodes I am using VisJs library. The library is using quadraticCurveTo method to draw lines between nodes. /** * Draw a line between two nodes * @param {CanvasRenderingContext2D} ctx * @private */ }, { key: "_line", value: function _line(ctx, viaNode) { // draw a straight line ctx.beginPath(); ctx.moveTo(this.fromPoint.x, this.fromPoint.y); // fallback to normal straight edges if (viaNode.x === undefined) { ctx.lineTo(this.toPoint.x, this.toPoint.y); } else { ctx.quadraticCurveTo(viaNode.x, viaNode.y, this.toPoint.x, this.toPoint.y); } // draw shadow if enabled this.enableShadow(ctx); ctx.stroke(); this.disableShadow(ctx); } }, { key: "getViaNode", value: function getViaNode() { return this.via; } Questions: Is it possible to achieve the goal using GSAP while integrating it with third party libraries? What would be the best way to achieve the goal? My assumption was to use Bezier and DrawSVG plugins. If possible could you provide some examples/code spinets? Is there anything else I should know?
-
Hello everyone, I am working on a project where I mix PixiJS and GSAP to animate my canvas' content and I am encountering an issue with the BezierPlugin, more specifically its autoRotate feature. For some reason it goes crazy when I enable it. The bezier path itself is correctly respected but the Sprite (which is a car in my app) rotates a few times on itself instead of slightly turning to indicate it's following the path. The way it rotates makes me believe it might be something related to the center of origin but I can't figure out why or how to fix it (I imagine it might also be more related to PixiJS rather than GSAP). You can have a look at http://haveagoodride.atvea.org/ (I know it's no CodePen, I hope it's not too much of an issue) which is my work in progress for the project. The issue I'm talking about is easily spottable but I'm talking about the vehicle moving along the path after you hit that "Let's go" button. Here's how my Bezier tween is written: path = [{x:-200, y:2000}, {x:286, y:1837}, {x:330, y:1725}, {x:330, y:1725}, {x:376, y:1669}, {x:387, y:1589}, {x:326, y:1531}, {x:242, y:1534}, {x:173, y:1519}, {x:140, y:1465}, {x:131, y:1420}, {x:155, y:1381}]; TweenMax.to(vehicle, 5, {bezier:{values:path, autoRotate:true}}); If needed to be looked into a bigger scope, it's in my app.js file, line 182. What am I missing here? Thanks!
-
I'm using the BezierPlugin to move elements along a path. Now I can't figure out how to accomplish the following (please view the sketch): I want elements A to C to move over the path, without them collide/overlap. So from the first positions as dwawn here, to the end positions as drawn. So that means elem A moves from 0 percent to about 80% of the full path, elem B starts at about 10% (0,1 progress) to around 90% and elem C has to move from 20% of the full path to 100% of the path. And the whole animation I'd like to loop. I tried some things to accomplish this with staggerTo() and onUpdate() among others. And maybe something could be done by using progress on each tween, but it's getting messy quickly and I wonder if there is no easier way to accomplish this. A] Is there any build in function inside Greensock/BezierPlugin to set moveFrom and moveTo offset positions on the path (so something like setting the from/to percentages in the drawSVGplugin)? B] I'm also looking for a way to get the absolute length of the path in pixels to determine the right places for A,B and C to start and stop. Is there by any chance a method available to get this absolute path length? Thanks in advance!
-
I've been trying to work the method in this example: http://greensock.com/forums/topic/1282-bezier-tween-draw-curve-solved/ to draw the curves that my sprite follows. It seems the static method BezierPlugin.parseBeziers no longer exists in the current version of GS. What can I do instead?
-
Hi, I am just trying to animate a plane between n-points sequently (every path is described as a quadratic bezier curve) since 3 hours. But I dont know how to autorotate it correctly, The paths are dynamically and the plane should always follow on the line, therefore I cant set the rotation initially to a fixed rotation. I also want to animate the size of the plane, starting with small to normal and ending with small, till the next bezier curve is starting from the end of the first. Can anyone help me with this? Graphic: http://pasteboard.co/1A9iuOJd.jpg It is also possible to plot a line behind the plane with TweenMax?
- 2 replies
-
- 1
-
-
- bezierplugin
- planes
- (and 2 more)
-
This is my first time trying to use the Bezier plugin and I'm very confused as to what I'm doing wrong here? In the codepen example I've attached, I've added borders to show where to hover to fire the animations. I'm trying to loop through a bunch of SVGs and tell the polygon inside of each of each SVG to animate down the path inside the same SVG. If you hover over the box on the far left, this is acting exactly as expected - the arrow animates down the path and does a little bounce at the end. However, none of the other ones inside the loop work as I'd like. The positioning of their arrows get progressively worse and I'm not sure why? I've logged the path data that I'm passing to the timeline and it looks correct, so I'm really confused as to where I've gone wrong in my code. Any help is greatly appreciated
-
When I'm animating along a bezier curve, the object being animated slows down towards the end of the curve - you can see this very clearly in the attached Codepen which draws a series of dot along the curve to visualize it. The dots are more tightly clustered towards the end of the curve. Is there any way of changing this? I've tried changing the timeResolution but it doesn't fix this.
-
GSAP Bezier Curve ViewerI've been working with bezier plugin quite a bit recently and made a tool to help visualize the curves as creating them blind is no fun! At its heart it's just this function, which should work to visualize any tween (uses jQuery): let visualizeTweenMaxBezier = (tween, steps) => { for (let i = 0; i < steps; i++){ tween.progress(i/steps); $("body").append("<div id='point" + i + "'></div>"); $("#point"+i).css({ position: "absolute", width: "2px", height: "2px", "background-color": "#7F7F7F", top: tween.target.css("top"), left: tween.target.css("left"), }); } tween.restart(); } Currently it generates code based on screen pixel values, if people are finding it useful though I might update it to generate code based on screen percentage, or percentage positions within the containing element. Happy coding!
- 4 replies
-
- 1
-
-
- bezierplugin
- tweenmax
- (and 5 more)
-
Is there a method of getting the same functionality of the BezierPlugin, without curves? The functionality is perfect, I just want perfectly straight lines without the curves. The codepen shows an example with the BezierPlugin, and another example (without GSAP) that plots just the lines. Thanks!
-
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.
-
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.
-
I have created Bezier curve using Canvas and added a div (square box) to it. Now when I am trying to move the div along Beizer curve the CO-Ords its considering are wrt to the div outside of it but not the Canvas element. So its ending up in a different curve compared to the actual curve drawn on the Canvas. Is there any example of moving objects drawn using Canvas? Starting point { x: 0, y: 0 } Control point 1 { x: 1, y: 50 } Control Point 2 { x: 200, y: 400 } End point { x: 400, y: 50 } var playBtn = document.getElementById("playBtn"); playBtn.onclick = function () { if (document.getElementById("box") != null) { var tween1 = TweenMax.to(document.getElementById("box"), 5, { bezier: { type:"cubic", values: [{ x: 0, y: 0 }, { x: 1, y: 50 }, { x: 200, y: 400 }, { x: 400, y: 50 }], autoRotate: false }, ease: Power1.easeInOut }); tween1.play(); } }; Thanks, Kumar.
-
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.
