Trapti Posted March 19, 2021 Share Posted March 19, 2021 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 More sharing options...
ZachSaucier Posted March 19, 2021 Share Posted March 19, 2021 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 More sharing options...
GreenSock Posted March 19, 2021 Share Posted March 19, 2021 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} 5 Link to comment Share on other sites More sharing options...
Trapti Posted March 20, 2021 Author Share Posted March 20, 2021 Thank you so much for your help. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now