Search the Community
Showing results for tags 'morphsvgplugin'.
Found 31 results
-
I am currently working on a project where an animation along the line is implemented, i.e. a chosen SVG element (in this particular case a <g> ) is moved along a <path>. Previously, I have implemented this using Snap.SVG and it worked fine, however, having to also do some "morphing" on the elements, I decided to give MorphSVGPlugin a go to save resources. However, so far it has not been a smooth ride... Stepping through the code, I observe the following: 1. The object is rendered in a starting position (the correct starting position). 2. The line path is rendered (I used fill="blue" just to demonstrate the position of the line) - the starting point is supposed to be the top "corner", however, it is an invisible "looped" line. 2. The animation kicks in, and the object is instantly positioned somewhere else! This is the actual problem for me right now. 3. The object is animated along a correct curve! This makes me think that MorphSVGPlugin.pathDataToBezier method is working as intended and provides x-y array of movement points. However, TweenMax.to() method seems to disturb the intended starting point for the animation, I really can't put a finger on it right now. There is very little control I have over the artwork, which has been designed in AI and exported to SVG format. Hoping to find the resolution to this problem as soon as possible. -
I'm trying to make an element appear as if it's drawing a path as you scroll down the page. I have it mostly working fine, but the the object doing the following slowly drafts away from the intended path the further into the animation it gets. Unsure why this is. There's an additional problem where it completely misses the path data for the last "hump" too, you'll see what I mean towards the very end of the line (maybe this is related?) To draw the path I'm revealing the line by animating a duplicate path with a white stroke above it. The pathDataToBezier function is fed the original path data though. Open to alternative ways of doing it if I can't find a solution. You may have to maximise the preview window to see it draw properly. Thank you -
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
-
Trying to learn animating along a path with Greensock. I got the animation working, but I can't seem to get rid of the white background. In the codepen, you can see there is supposed to be a green background (bg) in the html file. But a white background, that seems to be within the <SVG> tag is blocking it. Does anyone know why this is happening? Is MorphSVGPlugIn causing this? Thanks.
-
I'm trying to morph an SVG with a plugin and I'm getting pixel loss issues when previewing out of IE and Edge. Here's a screen capture of whats happening - https://www.dropbox.com/sc/xpqj3ggo2lavxbu/AAAgLnFAG-u4r-WfGf3urznla Anyone encounter this issue before? Thanks!
-
Thisone is for greensock, 'cause I don't know where else to put it, because this plugin is for clubmembers only and the plugin is not on github to respond there: First of all, briljant new plugin!! This was a reason for me to immediately renew my club greensock! Finally a morphplugin that even works if the amount of points in the paths are not equal! Thanks! Nothing beats Greensock! @greensock: just a minor detail: the findShapeIndex.js doesn't respect the greensock namespacing. So in my projects it's telling that TweenLite could not be found, because I set a namespace on the greensock lib. All my projects work this way, so I'm gonna make it work on my side here. But it would be great if this could be implemented in the lib for future updating of the code! That said; Going back to play with the new toy! Thanks again. Very nice work!
