Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'bezierplugin'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. 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?
  2. 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:8
  3. 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.
  4. 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.
  5. 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 i
  6. 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 N
  7. 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.
  8. 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!
  9. 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.
  10. 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
  11. 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?
  12. 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 co
  13. 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 mo
  14. 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 onUpda
  15. 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?
  16. 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
  17. 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
  18. 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.
  19. 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.cs
  20. 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!
  21. 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
  22. 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.
  23. 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 () {
  24. 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: