Search the Community
Showing results for tags 'bezier'.
Found 82 results
-
Hey there, I just discovered Greensock yesterday and am so far very impressed! I have a wheel chart (which you can view via the codepen url, although I'm not including the animations because they're tied to my server), that I want to animate in to various states (such as hiding certain wedges or changing the proportions). I'm currently doing all the math for the chart server side and what I'm handing back when I change states is a list updated paths (1 for each visible wedge, just to be clear) for where I want the wedges to end up. I'm using TweenMax.to to morph each wedges "d" attribute to its new one, but they morph there in a straight line and I'd prefer that they do so along a bezier. I know of the bezier plugin, but from I've seen that seems to be only for animating static objects, and I want mine to be stretching or shrinking as they move. Is it possible to combine the bezier plugin with what I'm doing? Many thanks! P.S. if this is something that is doable only by joining Club Greensock, that is fine.
-
Hi im trying to do animate a animated sprite trough a bezierpath controlled via scrollmagic. so far i managed to separate the problems in 2 : - the bezierpath is applied to the sprite container => works fine - the sprite animation is applied to the sprite itself => does not work fine EDIT: http://design-voilaah.com/mnd/app/ for the sprite control, my code is var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 500, offset: 100}) .setTween(sideSpriteTween) .addIndicators() // add indicators (requires plugin) .on("update", function (e) { // used to control and reverse the sprite when man walking left/right or up/down $cachedCharacter.attr("class", "character " + e.target.controller().info("scrollDirection")); }) .addTo(controller); When i have only one sprite, this man walking left/right, it works fine. when im adding a second sprite to control the man walking up/down, it does not work anymore var scene2 = new ScrollMagic.Scene({triggerElement: "#trigger2", duration: 500}) .setTween(frontSpriteTween) .addIndicators() // add indicators (requires plugin) .on("update", function (e) { $cachedCharacter.attr("class", "character " + e.target.controller().info("scrollDirection")); }) .addTo(controller);
-
I have a path for my animation. This path is Bezier curve which can be plotted by arbitrary number of points: bezier:{ curviness:1.25, values:[ {x:100, y:250}, {x:300, y:0}, /* ... N more points ... */ {x:500, y:400}, {x:200, y:100} ] } I want depict this path with SVG <path/> element. Path element uses M, C, Q, T and other parameters for plotting curve, for example: <path d="M100,200 C100,100 250,100 250,200 S400,300 400,200" /> How can I convert my points to the terms of parameters used in SVG path?
-
Hello, What an awesome animation library I must say. I am trying to work on some animation but having a hard time understanding the concept of bezier plugin. Please check the attached CodePen. What I want to do is, on the page load I want to animate all 5 links from the center of the screen to the left, which is a virtual arc and then I want to animate the links one by one along the arc path. Right now you will notice the links are animating but they are directly animating to the end position, whereas I want the links to reach their destination along the arc path. I tried using the bezier plugin "thru", "quadratic" and "cubic" types but none of them worked as expected. I am 100% sure I am missing something and so any help on this would be greatly appreciated. FYI: This animation library is so cool, it's net letting me sleep Thanks.
-
I'm a relative newbie to GSAP, so this maybe a simple problem but I can't seem to figure it out. I have a ball coming into the frame on one bezier/motion path which is working as expected. However, the next transition for it to go out of the frame has the curve going down instead of up. See the attached image for how I want the paths to work (how they look in flash). The second path works as expected when it is not following the first path. Can someone please explain what I'm missing? I put together a codepen.
-
Hi GreenSock Guys, I am stuck in making my TweenMax animation responsive, don't know how to make it. here it is http://codepen.io/sareer/pen/ZWqmaz Thanks as always
-
var tl=new TimelineMax(); tl.to(myDiv,5,{bezier:{curviness:1,values:[{left:100, top:250}, {left:300, top:0}],autoRotate:true}}); Bezier must see the animation to know the path, could make bezier show in the browser?
-
Hi, im working in this Bezier animation: TweenMax.to(myFish, 5, {bezier:{curviness:2.1, values:[{x:0, y:-100},{x:150, y:-200},{x:0, y:-400},{x:-100, y:-500},{x:0, y:-700},{x:0, y:-900}],autoRotate:["x","y","rotation",90,false]}, ease:Power1.easeInOut}); What i want to do is the next: I'm trying to simulate a fish swimming, everything is ok, but when the user do "touchstart" on the fish, this action will kill the tween but also I want to make this draggable, so I'm not sure if this could be, because I suppose I need the current position (top,left) to start the drag stuff. so.. any ideas? thanks a lot. I'm thinking.. $myContainer.append(target); Draggable.create(target,{ type:"top,left", bounds: $myContainer }); var tween = TweenMax.to(target, 10, {bezier:{curviness:2.1, values:[{x:0, y:-100},{x:150, y:-200},{x:0, y:-400},{x:-100, y:-500},{x:0, y:-700},{x:0, y:-900}],autoRotate:["x","y","rotation",90,false]}, ease:Power1.easeInOut}); target.on("touchstart", function() { tween.kill(); //then start dragging });
-
I have to move the small circie on the path. the circle emits animated flying circle when continuous clicked. I want to When I continuous click the button,the every circle would complete the animation one by one. But,in my code,when I continuous click the button,the circle's animation will stop. I did not want results. Please find the code on codepen Thanks.
-
Hi, sorry if my question not clever. Can I using bezier path (css left, top), set square path for my dot ? Or how can I do motion along square path another way (with on time duration)? The square should be responsive.
-
Hi Is it possible to make it so that the smaller pies in the attached codepen follow the same orbital path using bezier? Currently the paths are slightly different! Many thanks!
-
Hi, Folks. First of all, thank you so much for all these years. You rock! I am trying to make a "slider" that goes through a path made by bezier curves. My first attempt was build the animation and controll it with TimelineMax. So, when I click and drag an area I want to control a div through this curve. So, my first problem: I do not know how to take the path that BezierPlugin made internally and draw it on canvas. I know there is the method BezierPlugin.bezierThrough. It returns an Object with two Arrays, x and y. But inside these Arrays the objects have the properties a, b, ba, c, ca, d, da and I do not know how to use them to draw the path into canvas (I always used the quadraticCurveTo method and it accepts 4 parameters. Probably this is just a simple matter of understanding how those properties work together to define the right curve points of the path. The last problem Of course, make a simple drag/drop in a linear percentage will not sync the DIV animated with my mouse position. Here is where I am a bit lost: how can I sync the position of the DIV with my mouse coordinate? Like a "curved horizontaly scroll". Thank you for your help.
-
Hi all. What part of gsap would I use to leave behind a trail when moving an image around with bezier? What I am trying to do is animate an arrow. So the arrow head will move down the page and point at parts of the page and then as the user scrolls down I will trigger the next animation. This would continue moving the arrow down the page a bit like a snake. If you can imagine a snakes head moving up down and left to point at headings on the page and its body get left behind as a trail while the head moves on. I was thinking it would be a bit like this code pen but a green trail would be left behind: http://codepen.io/GreenSock/pen/LuIJj An suggestions? Thanks!
-
Hello, I have 2 sprites I want to tween along a bezier curve and then repeat, but I need the sprites to be staggered. This seems simple enough to create a timeline and add 2 bezier tweens and they will follow the tween. However, I want each sprite to start at different points along the path, i.e the 1st at 0, 2nd at 1/2 along the curve. and then repeat so it looks like they are looping around the bezier. If I add more sprites I want them all to follow the same path, but have them evenly spaced. What's the best way to do this? I have a codepen above (hacked from one of the demos) to show what I have so far. Basically, my question is, is there a way to start a sprite 1/2 way along the same bezier as the 1st? Thanks in advance, Andy
-
Hi everyone, I'm trying to animate two paths at the same time using svg paths and javascript, but seems something is not right with my codes where I can't find out what is missing. I want each box to run on the different paths. Any idea/s what is wrong with this code? See on codepen: http://codepen.io/anon/pen/WrQeOp Thank you very much in advance. Kind regards, Fernando Fas
-
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)
-
Hi All, I've been banging my head against this for a while, I've been trying to use particle emitters, and about everything else I can think of but I need some help with this. Basically, I want to replicate the attached pen but have an infinite amount of creatures spawned along the bezier curve with no breaks. I'm able to repeat the animation obviously but there's always a break in the chain as it repeats. Any help would be greatly appreciated! Thanks, -Dave
-
This is just a question about capabilities. I'm animating a site that is using the bezier plugin to move 4 small circles along outside of a single larger circle. I've got the animation working fine, I was just wondering if there was a way to have the plugin recognize the coordinates based on percentages relative to the parent or if this would just be too much of a strain on the browser(i.e. would it just bog the whole deal down because it would have to recalculate the path everytime the browser resized)?
-
For some reason Firefox Stable on Mac Yosemite appears to be somewhat choppy when it comes to the orbs floating animation in the pen shared. Any suggestions for improving that sequence or thoughts on why Firefox is reacting the way it is? My setup is very straight forward: var bezier_topleft = [ { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 } ]; tl.to(node, config.duration, { bezier: { type: 'thru', values: config.bezier }, onComplete: function() { fire(); }, ease: Linear.easeInOut });
-
I've got a great SVG animation almost ready to share but need some last round tips. My code has been refined plus the integration of pointers Blake gave me in a previous thread, but it seems I'm having difficulty pausing the orbs when they reach the end of their individual bézier paths (i.e. x: 0, y: 0). Any advice? When each brain wave signal fires from the orbs the wave should be firing when x is 0 and y is 0 just to repeat myself if I wasn't clear. Thanks!
-
Hi I'm working on a loader, using bezier to draw a circle. But following math I got a straight line at the top of my path. my tween is basically TweenMax.to(pillole[e],5, {bezier:{ type:"cubic", values:[{x:0, y:r},{x:-c*r, y:r}, {x:-r, y:c*r}, {x:-r, y:0},{x:-r, y:0}, {x:-r, y:-c*r}, {x:-c*r, y:-r}, {x:r, y:-r},{x:0, y:-r}, {x:c*r, y:-r}, {x:r, y:-c*r},{x:r, y:0}, {x:r, y:0}, {x:r, y:c*r}, {x:c*r, y:r}, {x:0, y:r}], autoRotate:false},repeat:1,ease:Linear.easeNone,yoyo:false}); any thought??? cheers marco
-
I have a stream of particles that I need to control. I have achieved to hide the amount when dragging a controller, but I would also need to change some of the bezier-points to change the course of the particles. I made a codepen to illustrate (the bar is the controller, you can drag it up and down) Is there a way to achieve this? Thank you!
-
Hi guys, Does anybody know if it is possible to plot html elements to follow a bezier curve / path? I'd like some small shapes to animate along a path as though it is being drawn. I could write out the HTML and CSS for all the shapes and timeline them in to view but there will be 100's of the buggers and I'd like to do it a quicker and more elegant using GSAP if possible. Any help would be great cheers
-
I was looking if it was possible to animate a curved line between two points so that if one point is dragged the line follows in a natural way. Like pulling a plug from your audio system and place it another place. I know there are possibilities with bezier curves used as path and there is something like 2dphysics. But I want to know if such a thing is possible with GSAP. After long time Google I found an example at http://www.jasondavies.com/animated-bezier/which is pretty much what I mean. If it's possible using GSAP, what are roughly the steps to take? Just found another example: http://codepen.io/ayamflow/pen/HrbKqmight be good start
-
Hi there, I am using the Quart.easeOut easing on all my animations. On some parts of my website, I would like to use the same easing but using CSS. How can I find the bezier function of Quart.easeOut?
