Search the Community
Showing results for tags 'pathdatatobezier'.
Found 15 results
-
I am trying to get a curved arrow to grow along a path, but having difficulty making it work correctly. Does anyone have any suggestions on how to make this work? MorphSVG doesn't work as desired, as I need to have it look like it the arrow head is leading the growth, rather than just transforming into another shape. Right now my codepen uses a mask to gradually show the line and I am moving the arrow head along a path using "pathDataToBezier". Which works okay, but it doesn't synchronize with the mask animation... despite my efforts to change timing and positioning of the mask, there must be a better way!
-
Has anyone encountered the issue, today I was work on a new project and I was using new updated GSAP and MorphSVGPlugin for this one. I had to do some motion along a path. So first this I wan creating variables like below: var motionPath_1 = MorphSVGPlugin.pathDataToBezier("#motionPath-1", {align:"#connecting-dot"}); But this is throwing an error as below: Uncaught TypeError: MorphSVGPlugin.pathDataToBezier is not a function This is the same thing I've been using and on the new update this has no change as I can think of. When using old GSAP and MorphSVGPlugin it is work fine. Has anyone encountered this? Does anyone know what is the issue?
-
Maybe someone can help me out. I have performance problems loading an GSAP animation. The animation is this: Add SVG to div, and the SVG will follow a data path in SVG d: coordinates. It works fine on desktop, and only sometimes on Ipad / Iphone. The problem is that the SVG is moving very slowly, like the data path is still being loaded. I tracked the fps, which topped around 100 for Ipad. How to experience the problem: Click on the down arrow to go below water surface. Then click on the whale icon. The whale SVG should appear from left to right, and follow a data path for 20 seconds. If the whale moves smoothly, then all is good. But if the whale is moving very slowly, and in staggering movements, then the error must be performance problems ?
-
Hi GSAP community! A huge thank you because thanks to you we can do something beautiful! For the needs of my future company that I am develloper I need to do a scroll action like this example> https://codepen.io/GreenSock/pen/GopRwQ I get there very well except that I wish 1. Have my line continue in draw svg until the end (scene with scrollmagic) 2. Stop the blue circle at a certain position while element 1 continues to end. (scene with scrollmagic too) I can not stop my tween blue... Can you help me ? thank you in advance
-
Hi GSAP community! :) I was playing around with a logo for fun when I ran into this strange misalignment issue, it's quite apparent when you see the demo on codepen. I think it what comes down to is when the moons are animated separately everything works fine, but then if I add the rotating animation of the entire object (svg group holding all the pieces) the 'align' property of the `MorphSVGPlugin.pathDataToBezier` settings does not align correctly. When the global rotating animation is done you can see the objects 'snap' into place correctly. Is there any way to make this work? Am I missing something, maybe I should set that 'align' property to something else? Let me know what you think :) Thanks, Gleb
-
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 ?
-
I am trying to run multiple circles along multiple paths. I need some help with: - Run animation in one direction (down). I adjusted the yoyo setting to false but it still reverses direction (up) - Align the circles with the centre of each path. How are the x y offsets determined? - Refactor script. Also do I need to have 4 circle paths? - Any suggestions how this could be improved would be awesome. Inspiration taken from https://www.quandl.com/#ember620
-
Hello! Today had some fun animating a lot of stuff, one of them was "typewriter effect" - the thing is it's SVG and it's in perspective, so I thought this can be faked with some Stepped ease and pathDataToBezier, there are 7 letters so I eyeballed a path for separator did some heavy math (lol) and thought it will work. It almost does. That's my final a bit clunky effect And that's the "clean" version But the question is why the stagger for #keyword > path does not start at the same time as the #separator? It looks like there's some "blank timeline space". I encountered this problem few times and I would love to know what I'm doing wrong here - any suggestion will be much appreciated. Thanks !
-
Hey, The scaling effect is a little bit crazy - but nice: While the SHARKS set centered on the path they swim away when scaling down. What is the reason for this? I didn´t touch ...
-
Hello everyone ! I have some very fun and complex thing to do, and any help will be much appreciated ! I'm trying to move SVG group along the path, scale it down, and then move elements of that group along different path. But when I scale down the parent element I also scale the motion path of the child element, and I'm wondering what I'm doing wrong here? Or, maybe my approach is just totally bad. That is what I have https://codepen.io/Dikus/pen/EmaqbV And that is what I would like to achieve - of course the group should scale down, but the path should be the same https://codepen.io/Dikus/pen/EmaqLP?editors=1010 Final SVG - maybe this will help you to imagine what I would love to achieve - the last movement of the purple particle, should move along the purple stroke http://patryksmakosz.com/dev/spectrometer/ So, my question is - is it possible to scale down the main element, and do not scale the path with it? Wish you all the best ! PS pathDataToBezier just rocks! Probably I miss something big here -
Hey I have small issue with figuring out how to use the pathDataToBezier plugin, I've read a lot of similar topics, and probably I could do this with just some pure js or even pure css. But I wonder is there some simple way to animate few objects on the same path? I used some very simple example - right now, only the red 'planet' sticks to it's orbit, but it also ends in the different point it should - this should be just perfect closed orbit for all objects on it. I'm probably missing something very basic here Any suggestion on how to bite this would be a huge help ! There will be a lot of objects on that orbits, and I would love to have a lot of control there. http://codepen.io/Dikus/pen/VpwdNx?editors=1010 Thanks!
-
I'm using the pathDataToBezier to create a path for my tween to follow. All is good... ...except I would like to be able to scale the path for responsive screen sizes. I have not figured out a way to do this. I've tried to scale the path smaller before calling "var path = MorphSVGPlugin.pathDataToBezier", but there seems to be no effect. Any ideas? Am I missing something?
-
Ran into an interesting bug the other week. I was using DrawSVG to make an element follow an SVG path (technically a polyline), and Morph SVG's pathDataToBezier feature to grab and convert the polyline to path data. I found that if I named my polyline with a specific naming convention, MorphSVG broke. The ID name I used was path_1_1_1 and for some reason the specific sequence of a repeated underscore and a number broke the plugin. The console log reports "ERROR: malformed path data" but the path is fine; it's the _#_#_# name that breaks things. Please see attached Codepen for a demo. Changing my ID name fixed everything but it took a few hours of QA (and baffled coworkers) to resolve. Since I didn't see any online reports of this issue, I figured I'd post here to bring attention to it.
-
Hi, Its allways a pleasure to code animations with GreenSnake - sorry, GreenSock. http://codepen.io/mikeK/pen/XNJgEP Is there a smart solution to combine the animation parts (morph/bezier)? Finally I want more and random positions. The other - maybe not so 'green' - aspect is a more or less synchronization of audio takes and action. Anyway - I´m looking forward to your hints. Best regards Manfred
-
Hi I need some help from the forums' SVG savants, I'm using DrawSVG and MorphSVG to create a couple of animations, but I'm hitting a wall regarding the Morph SVG part of it. I draw a simple path and then animate the fill. The idea is to create a frame with some dynamic text inside, like this: Here's the pickle. Since the text is dynamic the frames on the has to be changed according to the height of the text container inside. For that I'll use MorphSVG, but I need to translate the points of these paths by a specific amount of pixels, which changes the entire scheme of the paths, ie, changes not only the points' positions but also the control points of the bezier curves as well. I using pathDataToBezier() I can get the paths and offset the points by a specific amount, but how can I get this bezier with the new array of points and turn it back to an SVG path that I can use in the MorphSVG Plugin?, like in the codepen sample. PS: Is really odd to be on the other side of a thread
-min.thumb.png.e9b9ff661954360c5f1ce15c7f44e077.png)
