Search the Community
Showing results for tags 'morpsvg'.
Found 4 results
Morph animation is not working
MyJessiJess posted a topic in GSAPHi guys, I'm trying to use the MorphSVG plugin for the first time, and I can't get it to workClearly, I am missing something, but not sure what it is. Thanks in advance for your help
Best way to animate clip path for image or video
kasperlegarth posted a topic in GSAPHello, I'm trying to have animate a clip path on a div. The div contains an image or a video. The clip path is in a svg, and i use css to apply the clip path, but the animation is laggy. I have tried to insert an image into to the svg the animations i smooth. When i try to use foreignObject to put the video into the svg. The animations is smooth, but there is somekind border on the foreignObject. Currently im stocked how to proceed, what should i search for, how do i debug? In my codepen the first two examples is clippath on a div with some element inside. The next two is the element inside the svg.
Trouble with glitchy morphSVG
jakob zabala posted a topic in GSAPI don't understand why sometimes shapes morph like this I tried copying and pasting from illustrator and also reducing points but this B is still morphing poorly. I can't figure this one out. (I can't flip the D because when I need to animate in there is unwanted flipping that gets animated)
Animating between two SVG shapes to look like gentle swayingHello! I am trying (hoping) to achieve SVG tulips to look like they are gently swaying from left to right in a type of 'evening breeze'. The way I have thought about it, is to have two outlines for each tulip and the morph between these two oulines back and forth to give the idea that its slightly moving. Erm... So looking at my CodePen, the result ended up being faaaaarrr from that... I thought trying to change the index point might help. But its still rather messy. Another issue could be that the outlines are too complex different. I am now not even sure if morphing is the way to go. I did have a close look at the GSAP WaveSVG function (the one for the morphing green cape), bit that is way to complex for me. I also found a previous article in your forum: This CodePen from the article is really lovely. It is this effect I was thinking about. But not sure how to apply that to SVG tulips... Any ideas? Is it possible? Do I need to work on the SVG shapes more? Thank you in advance.