Search the Community
Showing results for tags 'morph'.
Found 38 results
-
Hello, I'm trying to get a smooth animation with MorphSVG: http://codepen.io/carlbren/pen/pEYkRg The steps should as smooth as these ones: http://codepen.io/waterfallmedia/pen/ZbOjRO http://codepen.io/GreenSock/pen/WQjRXE (see the cape animated with waveSVG which is not supported) http://codepen.io/osublake/pen/meepJE You can see a stop between the steps in my animation. Please, do you have any idea of what I could do to not feel the steps in the animation? Thanks!
-
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.
-
Hey all, I have a query regarding animating along an SVG path. I have been able to get the circles animated as per the codepen demo but due to the path going in different directions, i'm struggling to figure out what I do with the arrows. Basically, the arrows are down, left and right and I was wondering if there was a way that I could change the direction of these arrows depending on where they are along the path? I just think the animation will look odd when the arrow is animating downwards but is facing right for example. The codepen demo is as far as I have got in terms of animating this. Thanks
-
Hello all - I would love some help figuring out the z-index. I have everything like I want, however; the black Nike check is not moving to the front (over top of the yellow check on hover). Take a peek at my codepen, any help is much appreciated! Thank you! nick
-
Hello, I am trying to make a morph using <use xlink:href="#ID"> But I don't know how convert it or if is possible... Here is a normal example: http://codepen.io/lagden/pen/WxNyzO Here is a example using xlink: http://codepen.io/lagden/pen/GqRGoR The expected on second example is: Morph circle to square when user click on element, but show this message at console: WARNING: cannot morph a <USE> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing. Regards, Thiago Lagden
-
Hey guys! I'm new to this community and I'm not sure if this is the right place to post this but -- I'm having trouble morphing shapes. I've followed the Youtube tutorial but it just isn't working. Could someone kindly take a look? All I'm trying to do is change the letter from "A" to "R". Thanks in advance!
-
Hello, I was following along with the MorphSVG demo, and was wondering how you would change the color of the second shape? Both shapes have their own color, but the morphing keeps it at the #start fill color. http://codepen.io/anon/pen/jWxeVY Thank you!
-
I have a moderately complex animation running here: http://178.62.48.108/play On desktop, everything runs very smoothly. However, on mobile devices the animation is slightly jittery. The whole animation is composed using Morph SVG. There are 5 main elements of the animation and 14 keyframes, please feel free to inspect the JS to see. This is one of my first Greensock animations, so I would be keen to learn how this type of animation can be optimised.
-
Hello, Im trying to use MorphSVG but it isnt working. I made a realy simple example but even this doesnt work. So basically I want to first use DrawSVG to draw a stroke and then morph it into a filled shape (not in codepen). But the morphSVG isnt working. I created a very basic codepen and even this is not working. Could it be because of my SVG?
-
Hello, I'm a bit lost in Morph magic. Please take a look on my noob approach http://codepen.io/Dikus/pen/pgbQEe to morph one logo into another - It's messy and it fails on start. I would love to know how to prepare SVG from Illustrator so that MorphSVG can handle the rest. I've watched a lot of tutorials about morph, and I experimented with few demos on codepen but all SVG's there are nice and clean - I wonder, how to simplify them to paths? I'm tired of hitting walls with my head - paint is already falling of - so please aid me a bit, give me some clues, anything ! Probably I'm doing something very stupid so be gentle ^_^''
-
Hi, GreenSock developers! I'm amazed when see the latest Morph SVG Plug-in! I comparing two SVG Morph tool, but i seen you're using another way to morph, you're can share how you're doing? http://codepen.io/dalisoft/pen/qOQrwz - my pen, only for test http://codepen.io/chrisgannon/pen/QjKNeZ
-
I'm using morphSVG to change the shape of an SVG that is already using the morph function. It works as expected if you click the trigger "Grow" button with in the first second or so of the animation, but breaks (won't morph) after that that. I'm relatively new to GSAP, so I'm hoping I'm not missing anything too obvious. I'm not sure what's causing this. Any thoughts? http://codepen.io/ryan_labar/pen/gaEEGR Thanks!
-
I voisprovozhu any example of a meteor.js in the plugin Morph, but nothing happens. Tried this one example http://codepen.io/cjgammon/pen/EVWjBO played only DrawSVGPlugin. Maybe someone else has already used a plug in a meteor.js? I would be very grateful for any help!
