Search the Community
Showing results for tags 'swaying'.
Found 1 result
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.