Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mamin

wave on image

Recommended Posts

That site is using <canvas> and most likely some sort of displacement map animation.

Please see this demo from @OSUblake (OPEN IN FIREFOX and mouseover image)

See the Pen WQyBJb?editors=0010 by osublake (@osublake) on CodePen

you can get similar effects with SVG too:

 

  • Like 3
Link to comment
Share on other sites

I believe this effect has been done with a WebGL library,
it can be ThreeJs or PixiJs.
This site was made by one of the members @jesper.landberg here of the forum.
 

But you can use GSAP to animate the values that the Distortion Filter animation performs.

  • Like 4
Link to comment
Share on other sites

On 1/3/2019 at 7:47 AM, Carl said:

Please see this demo from @OSUblake (OPEN IN FIREFOX and mouseover image)

 

Yes, that demo is currently broken in Chrome. Possible bug.

https://bugs.chromium.org/p/chromium/issues/detail?id=798001

 

 

But here's a version using PixiJS.

 

See the Pen ZbRVPY by osublake (@osublake) on CodePen

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

On 1/3/2019 at 1:25 PM, mamin said:

hi

i watch this site

https://asaro.co.uk/experiences/adventures/#introduction

how to use wave on image? Such examples

please help me...

 

 

Hi,

I made this site, the image is rendered with three.js, and the effect is made in a shader distorting the UV values with some sin and cos math.

  • Like 4
  • Thanks 1
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.
×