Jump to content
Search Community

wavy banner with text block

fcdobbs test
Moderator Tag

Recommended Posts

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

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

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

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

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

  • 4 weeks later...

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

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

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

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