fcdobbs Posted January 10, 2023 Share Posted January 10, 2023 Hi, I’m attempting to create a wavy banner, similar to a banner towed behind an airplane. I’d be curious if anyone has ideas about how to smooth out the edges of the tiles in this example. Or if there’s a way to accomplish this that would look more like the text block is on a wavy surface. This version is based on the discussion from this post: https://greensock.com/forums/topic/18535-wave-banner-animation-background/ Thanks! See the Pen bGjqzGz by ripmurdock (@ripmurdock) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 10, 2023 Share Posted January 10, 2023 Hi, I think the best approach is to use the MorphSVG Plugin. Of course that brings the fact that you have to create the initial and final state of the SVG path in an editor but it seems the easiest way to do that. Keep in mind that you can also mask regular DOM elements with SVG masks, they only need to have the same dimensions as shown in this thread: Hopefully this is enough to get you started. Let us know if you have more questions. Happy Tweening! Link to comment Share on other sites More sharing options...
fcdobbs Posted January 12, 2023 Author Share Posted January 12, 2023 Thanks. In order to create the wavy banner effect with MorphSVG, would I have to apply the sine wave distortions to the y value and the background color in Illustrator? Is there a way to apply a sine ease to the morph of coordinates and/or colors within the MorphSVG plugin? Or perhaps add anchor points to a rectangle that can be animated in GSAP? Thanks again. Link to comment Share on other sites More sharing options...
Rodrigo Posted January 12, 2023 Share Posted January 12, 2023 Hi, 50 minutes ago, fcdobbs said: Or perhaps add anchor points to a rectangle that can be animated in GSAP? I'm not an expert on SVG but that would indeed be my first attempt. Create a rectangle, add the anchor points to it creating the initial state of the waved banner. Then move the anchor points to create an intermediate state and a final state. Grab the three paths and let MorphSVG do the rest. Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted January 12, 2023 Share Posted January 12, 2023 I'm not sure MorphSVG is gonna deliver exactly the effect you're after here. You may want to explore a displacement map filter. Here's a related thread: And if you use something like Pixi.js, these might interest you: https://pixijs.io/examples/#/filters-basic/displacement-map-flag.js https://pixijs.io/examples/#/mesh-and-shaders/textured-mesh-basic.js I hope that helps nudge you in a good direction. If you want to contact us about hiring us to develop a solution for this, I do have some ideas we could try but it's not a small undertaking. Link to comment Share on other sites More sharing options...
fcdobbs Posted February 7, 2023 Author Share Posted February 7, 2023 Thanks. The thread referenced above seems to conclude that SVG displacement map filters weren't widely supported in 2015. This would be for a consumer facing web page. Is there a good way to estimate what the reach among consumers is today for SVG displacement map filters? Thanks again. Link to comment Share on other sites More sharing options...
GreenSock Posted February 7, 2023 Share Posted February 7, 2023 Maybe this: https://caniuse.com/?search=displacementmap Just be careful - I think SVG filters can be pretty expensive performance-wise (unrelated to GSAP). If I were in your shoes, I'd run some tests and I'd definitely compare it to doing the same thing in Pixi.js. Good luck! Link to comment Share on other sites More sharing options...
fcdobbs Posted February 8, 2023 Author Share Posted February 8, 2023 Thanks. What is a good way to figure out if my design is too taxing, in particular for a mobile device? Are there any rules of thumb of which I should be aware in terms of how many times I can use SVGMorph or SVGDraw, for example, before I start to run into performance issues? Also, for this wavey banner, would my time be better served learning Pixi.js or perhaps trying to increase the resolution in my original design by shrinking the div size and spacing out the letter placement among the div's? Thanks again. Link to comment Share on other sites More sharing options...
GreenSock Posted February 8, 2023 Share Posted February 8, 2023 6 hours ago, fcdobbs said: What is a good way to figure out if my design is too taxing, in particular for a mobile device? Trial and error. Pick the lowest common denominator (the slowest device your site must look okay on) and test. 6 hours ago, fcdobbs said: Are there any rules of thumb of which I should be aware in terms of how many times I can use SVGMorph or SVGDraw, for example, before I start to run into performance issues? Nope. 6 hours ago, fcdobbs said: Also, for this wavey banner, would my time be better served learning Pixi.js or perhaps trying to increase the resolution in my original design by shrinking the div size and spacing out the letter placement among the div's? Totally your call. If I were you, I'd probably try both and see what works best. Good luck. 👍 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