Distort images

[mrstevejobs]

I've seen this site in the showcases (https://asmobius.co.jp) and I got interested in replicating a similar effect (without the circular thing).

 

Any suggestion to point me in the right direction regarding how to create those image distortions that appear from the right and fade to the left while getting to its original shape?

Thanks!

[ZachSaucier]

Hello,

 

Which part of the site specifically are you referring to? There are a lot of things going on there:

1. The ring blur distortion.
2. The fade in and pan of an image from one side to the other.
3. The circular reveal swipe.

I think you're asking about the second part I mentioned?

[mrstevejobs]

When changing background images i notice the image that comes in is bended at the beginning and then it becomes normal when the transition finishes. 
This is happening at the same time as the fading transition takes place while changing from one image to another.

So I'm interested in the bending part. From bended to normal.

[ZachSaucier]

2 minutes ago, mrstevejobs said:

When changing background images i notice the image that comes in is bended at the beginning and then it becomes normal when the transition finishes.

This is likely done using a WebGL shader. You might be able to find an existing open source project that you can use to recreate this effect. If not, you can look at similar ones that are open source such as this repo. A few days ago I showed how to use this effect on a button click instead over on StackOverflow. 

[ZachSaucier]

It looks like there's a new demo on Codrops that you could try to recreate this effect: https://tympanus.net/codrops/2019/09/04/a-configurator-for-creating-custom-webgl-distortion-effects/