Jump to content
Search Community

Morphing Wind Motion

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm attempting to make the blades of grass sway back and forth and was wondering if that's doable. I've tried using MorphSVG, but found the results to be pretty terrible in regards to the motion created even when adjusting shapeIndex values both positive and negative. I don't have a demo ATM just curious on others thoughts based on the image attached. Achieving this life like motion is pretty difficult for me currently so would love to learn a bit more how to achieve this.


Link to comment
Share on other sites

It's no easy feat, that's for sure. To be truly life-like, you'd need to isolate each point (literally, every anchor and control point) in the artwork and animate it independently, probably on various offset sine waves. I used a technique like that for the flapping cape on the GreenSock logo at http://greensock.com/morphSVG/ but it's not for the faint-of-heart. I wish I had time to explain every line of code and walk you through it, but like I said it's pretty complex. 


Another technique would be to simply take the artwork into Illustrator (or whatever) and move the blades of grass manually and create several "keyframes" of sorts and then use MorphSVGPlugin to morph inbetween them. Only yoyo-ing between two keyframes probably won't look realistic though (which isn't the fault of MorphSVGPlugin - it's just that you're trying to emulate a certain dynamic that's ruled by complex physics). 


Again, I wish I had a super-simple solution for you :(


If you're curious about the flappy cape, you can look at the waveSVG() function in the codepen: http://codepen.io/GreenSock/pen/WQjRXE?editors=001

  • Like 4
Link to comment
Share on other sites

You're not going to get life like motion out of those little nubs. I would separate each blade and rotate them with a stagger. You could add a little morphing bend in there. That grass reminds of the seaweed in this demo. Gently push along the top of the seaweed and you can see the rotational behavior I'm talking about.




Here's some inspiration for you. Its based on a demo from an old canvas library I used to use. It's not doing a sine wave like the cape, so it's a little easier to do, but there is still some trig involved.


SVG Procedural Grass.


See the Pen ?editors=001 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

Thanks! Creating that isn't as hard as it looks. Each blade of grass is just two Bezier curves that are offset at the base, and meet at the end. On each frame render, the anchor point for the tip of each blade is rotated, creating the sway effect.


Here's a reduced version, broken down into variables for two different blades. There's really only 4 different calculations that take place in the update function. The rest of the code is just setting the coordinates for the curves, which is pretty easy to understand if you know how to manually create the path string of a Cubic Bezier curve ex "M0,0 C300,600..."


See the Pen OyEgop?editors=001 by osublake (@osublake) on CodePen

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...