Search the Community
Showing results for tags 'morpsvg'.
Hello, 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.
I 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)
Hello! 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.