Search the Community
Showing results for tags 'path'.
Found 58 results
-
Do I really have to load another library just to animate along the path. Can carl's stroke animation example be used? http://codepen.io/rgfx/pen/cusav I have it set to 25% width works great. What am trying to do is something like the progressive reveal dots example but have it be responsive. http://codepen.io/GreenSock/details/ABkdL/ And while am at it able to figure out how to animate along a path responsively as well, without another library. Slowing building up my responsive animation tools, thanks for everybody's help, can't wait to get to production mode.
-
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!
-
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
-
I'm trying to animate a <PATH> within an <SVG> with transform. With the help of another post in the forums, I've managed to get the transform working, but I can't find a way to change the transform origin (css transform-origin doesn't work). It always performs the transform relative to the top left. Here's a basic demo I'm working with at the moment: http://jsbin.com/eyaqOLIY/1/edit?html,js,output In the final version, I will be manipulating an SVG that is created by another javascript library, so I can't change the HTML output much --- I could add classes and such, but I can't go wrapping things in <G> elements, etc. The final will also have multiple paths within a single <SVG>, that I need to animate seperately, so I can't apply the animation to the SVG. I need to animate the <PATH>. Any idea how I can animate the path relative to its center rather than the top left (needs to be compatible with IE9 and FF10)? Thanks! Matt
-
If I have a set number of coordinates, say a user draws an s-curve with their mouse/finger, what would be the best way to tween an object along the same path? I can loop a bunch to TweenTo calls but I'm wondering if there is a better way? A plugin maybe that helps with this? Thanks for any suggestions.
-
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
-
I cant seem to get accsess to the BezierPlugin, I get a undefined error. My aim is to draw the line my object moves along using bezierThrough, do you know of any simple tutorials/examples of this? I found a few but they are quite confusing.
-
I want to tween various movieclips over the same path. My problem is I want them to be offset so that they follow the same path but still are at a distance from each other. I searched the forums but couldn't find any offset path property. Anything you can suggest?
