Jump to content
Search Community

Need help in animating flag smoothly

Trapti test
Moderator Tag

Recommended Posts

Hi, 
I am trying to animate the flag smoothly, and I want it to be like GSAP logo(capebottom) . I tried and not able to understand the waveSVG function hence I am struggling. If there is other ways to achieve this kind of effect I do not mind trying that.  

Thanks in advance for the help. 

See the Pen yLVWGWy?editors=1000 by tripti1410 (@tripti1410) on CodePen

Link to comment
Share on other sites

Hey Trapti. 

 

First off, you're using an old version of GSAP and the plugins there. We highly recommend using GSAP 3. Here's a version that uses GSAP 3.

 

As for how to make it more flag like, you just need to change the parameters to get it looking the way that you want it to. I suppose it would be helpful if there was a better explanation of what each parameter does... @GreenSock maybe you could add that to the demo that I linked above?

 

There are of course other ways to achieve this sort of thing. WebGL is a fairly good way as flag movement is pretty easy to reproduce inside of a shader. But if you're not already comfortable using WebGL it might be a big jump. 

Link to comment
Share on other sites

6 hours ago, ZachSaucier said:

As for how to make it more flag like, you just need to change the parameters to get it looking the way that you want it to. I suppose it would be helpful if there was a better explanation of what each parameter does... @GreenSock maybe you could add that to the demo that I linked above?

Sorry, but that function was NOT intended for public use - it was written specifically for that one demo with the GreenSock logo. Some of the parameters require that you know how many points are in your SVG, where they are, etc. It's beyond the scope of what we can provide here in these free forums.

 

What you're asking for is not trivial - it basically boils down to animating each point in the SVG with a sine wave, but the points that are on the "flag pole" would need to not move at all, so you'd need to taper the movement as it gets closer to the pole. Again, this isn't a simple task but it is certainly possible. If you need some consulting help to build it, feel free to reach out to us privately and we can discuss costs, scheduling, etc. 

 

These settings in your demo look better, but far from perfect: {taperEnd: 500, invertFlow:true, taperStart:2, loose:true, length:500, angle:0, magnitude:15, phase:120, duration:2, repeat:-1}

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