Jump to content


Swaying item

Recommended Posts



I am trying to get these flowers to sway gently from side to side-- each of the flowers are separate SVGs. Not sure about the best way to go about this or what methods to use- thanks for any help or suggestions!! 

Screen Shot 2022-05-12 at 1.36.17 AM.jpg

Link to comment
Share on other sites

Welcome to the forums @KristineJ


You might be able to use the MorphSVGPlugin, which is a Club GreenSock perk.


Other than that, animating a plant swaying is not trivial. It definitely ranks up there on the difficulty scale. I made some grass animations several years ago, and even the most basic version required ended up being really math heavy.


See the Pen OyEgop by osublake (@osublake) on CodePen


  • Like 2
Link to comment
Share on other sites

Ah, gotcha I was able to get a slight sway -- it's not perfect, but it'll do the job-- I ran into some browser trouble though, my SVG's aren't loading properly on Firefox (even without animation), over my PNG's are working-- but if I use the PNG the animation doesn't work-- is there a way to use my animation with PNG files? I've included a sample of my code 

Screen Shot 2022-05-12 at 4.54.59 PM.png

Screen Shot 2022-05-12 at 4.54.45 PM.png

Link to comment
Share on other sites

Nothing stands out as being off, and you can certainly animate PNGs, but I'm not sure you would see that animate if the rotation is going from -1 to 1. That's a tiny amount of movement.


Can you make a minimal demo of the issue?


Link to comment
Share on other sites

Perfect, it did work with the PNGs and the issue is fixed. I don't where I got the idea that I couldn't use PNGs, whoops! 

  • Like 1
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.