Jump to content
Search Community

How to make picture animates like waves?

bam25th test
Moderator Tag

Recommended Posts

Hi everyone, I am new in here.

My employer wants me to create a page which has an animated background exactly like the grid in this web, whose grid is moving like waves. They want to use different grid image but  with the same effect. When I check the website, they use GSAP, hence why I am here. I have been reading the documentations, and so far haven't found any method to create such animation. If anyone can help me, that would be highly appreciated.

Link to comment
Share on other sites

 

Welcome to the forums @bam25th

 

While GSAP certainly can be used for animating that, the wavy effect itself is nothing that can be done with GSAP alone.

For something like that you will likely need to work with WebGL/canvas - from what I can tell, the page you linked to uses three.js for that.

 

And my guess would be that for the grid-background to become wavy they use a displacement-map similar to what @Rodrigo explained for another page just recently in this thread here ( although that page mentioned in that thread is using pixi.js )

 

 

 

  • Like 4
Link to comment
Share on other sites

14 hours ago, akapowl said:

 

Welcome to the forums @bam25th

 

While GSAP certainly can be used for animating that, the wavy effect itself is nothing that can be done with GSAP alone.

For something like that you will likely need to work with WebGL/canvas - from what I can tell, the page you linked to uses three.js for that.

 

And my guess would be that for the grid-background to become wavy they use a displacement-map similar to what @Rodrigo explained for another page just recently in this thread here ( although that page mentioned in that thread is using pixi.js )

 

 

 

Thank you so much! I really appreciate your help.

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