Banner Wave like animation

[Hamza Azeem]

Hi Everyone,
Urgent!

I want to create banner just like it did on https://www.chooseplasticfreewipes.com/
Wave like banner that shows waves infinite when cursor enters it behaves with the cursor direction. Can anyone help me to create and if you have any demo like this using GSAP you can share with me. It would be great for me, 

Thanks in advance!
Hamza Azeem

[Rodrigo]

Hi @Hamza Azeem and welcome to the GSAP Forums!

 

If you're talking about the top section (blue round graphic) that is actually the hero section of the site and not exactly a banner.

 

Also the way to achieve that is using GLSL Shaders:

https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders

https://thebookofshaders.com/

 

I don't recall a specific demo that does exactly what you're trying to achieve, so you'll have to look around and learn about this stuff in order to do it yourself. If you look in google and youtube you'll find a lot of free resources to learn about shaders. You can also post in the jobs and freelance forum in order to get paid help there:

https://gsap.com/community/forums/forum/15-jobs-freelance/

 

Hopefully this helps

Happy Tweening!

[geedix]

It is also possible to get the effect by animating path data of an SVG. Not super simple, though.

Here are some fun Codepen demos that might be relevant:

 

See the Pen vdzjyg by osublake (@osublake) on CodePen.

 

See the Pen MWpjVgB by georgedoescode (@georgedoescode) on CodePen.

 

See the Pen ExxboOM by nickmantia12 (@nickmantia12) on CodePen.

 

[Hamza Azeem]

Hi Rodrigo,

Are you saying it will be done using three.js. I also want to know in Hero Banner it also animate according to the cursor position. Furthermore, can you help me by giving the idea how to make hero banner. Is this be done with SVG or something else because What i am thing is that we can use SVG and then use path to animation waves effect. Kindly share your thoughts on that 


 

[Rodrigo]

Most likely, THREEJS is normally the goto tool for creating shaders these days. I know that there are other libraries and packages that can do that but a large percentage of developers use THREE.

 

Happy Tweening!

[Hamza Azeem]

Hi geedix,
Last Codepen demo is almost similar to my requirment. but i reviewed few library used in that pep etc, is this compatible iwth reactjs or not? If yes can you convert it for me similar demo in reactjs

 

[Rodrigo]

Hi,

 

Converting that demo to React shouldn't be too complicated if you understand what the code is doing. React is basically JS so is just about understanding the codepen demo and applying it to React. If you are unable do that I wouldn't expect somebody to replicate that on React for free if I was you. There could be some user with time a will to do it but I want to manage expectations. The most certain path to getting this done for you is to post in the Jobs & Freelance forum:

https://gsap.com/community/forums/forum/15-jobs-freelance/

 

Good luck with your project! 👍