bam25th Posted May 3, 2021 Share Posted May 3, 2021 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 More sharing options...
akapowl Posted May 3, 2021 Share Posted May 3, 2021 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 ) 4 Link to comment Share on other sites More sharing options...
bam25th Posted May 4, 2021 Author Share Posted May 4, 2021 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 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